The following code works.
<body ng-app="" ng-init="names=['a','b']">
<ul ng-repeat="x in names">
<li >
{{ x }}
</li>
</ul>
</body>
but as soon I add a value to ng-app (say ng-app="myApp"), it stops working. Anyone would know why?
Because, you told angular by specifying name, that in this page all objects definitions and details which I am going to use is defined in a module called my app. Angular Search for it and does not find.
when you specify the ng-app you should specify the app definition, controller you can initialize these values from ng-init.
<html>
<body>
<div ng-app="myapp" controller="MyController">
<span>{{personname}}</span>
</div>
<script>
// this will setup the myapp
var app = angular.module('myapp', []);
app.controller('MyController',function(){
$scope.personname='tammi';
});
</script>
</body>
</html>
You will need to create a separate "app.js" (don't forget to reference it inside script tags in the html(view)) file and create an angular module and assign it to the global variable "myApp":
var myApp = angular.module("myApp", []);
Then create a controller that will expose the data to the view via the $scope service:
myApp.controller("MyCtrl", function($scope){
$scope.names = ['a', 'b'];
}
In the view, do the following:
<body ng-app="myApp" ng-controller="MyCtrl">
<ul ng-repeat="x in names">
<li >
{{ x }}
</li>
</ul>
</body>
Related
I am new to Angular, i am using Angular5.
I have productlist.js, having data in that file. Binded that data in the my html page, it's not working.
If i have the data in html file [ commented code in sample.html ], then it is working as expected.
productlist.js
angular.module('myShoppingList')
.controller('myCtrl', function ($scope) {
$scope.products = ["Milk", "Bread", "Cheese"];
});
Sample.html
<div ng-app="myShoppingList" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in products">{{x}}</li>
</ul>
</div>
I have added the productlist.js under the head in sample.html
You have few mistakes, you need to add empty dependencies to your module as follows,
angular.module('myShoppingList',[])
DEMO
angular.module('myShoppingList',[])
.controller('myCtrl', function ($scope) {
$scope.products = ["Milk", "Bread", "Cheese"];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myShoppingList" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in products">{{x}}</li>
</ul>
</div>
When you add into html file, the following order of statement is important as well.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="yourSampleScript.js"> </script>
Please take into consideration the abovementioned code snippet.
I need to add dynamic template on click for that i have used :
var action_template='';
app.controller('EventCtrl',function($rootScope){
action_template = action_template +'<ul><li><a ui-sref="/root/authenticate"><img src="default.png"></a></li></ul>';
$rootScope.template=action_template;
});
In html:i have used ngSanitize
<ul>
<li ng-bind-html="template"></li>
</ul>
template is appending perfectly but there is no href link.
what I am doing wrong ? Or is there any solution for doing the same thing ?
The main problem was unable to add any angular directives such as ng-click, ng-href, ui-sref etc.
But after adding $sce.trustAsHtml it is adding ui-sref but not adding any hyperlink.
Hint will be appreciable.
Thanks
I think you forgot trustAsHtml in your controller(you can see in the snippet after running, that ui-sref is present in the source):-
var app = angular.module("myApp", []);
var action_template='';
app.controller("myCtrl", function($scope,$rootScope,$sce) {
action_template = action_template +'<ul><li><a ui-sref="/root/authenticate">Link</a></li></ul>';
$rootScope.template=$sce.trustAsHtml(action_template);
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-bind-html="template"></li>
</ul>
</div>
You need trust your HTML, using $sce, Try below code
var jimApp = angular.module("mainApp", []);
jimApp.controller('EventCtrl',function($rootScope, $sce, $scope){
var action_template='';
action_template = action_template +'<ul><li><a ui-sref="/root/authenticate"><img src="default.png" alt="Default image">Link</a></li></ul>';
$scope.template=$sce.trustAsHtml(action_template);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="mainApp" ng-controller="EventCtrl">
<ul>
<li ng-bind-html="template"></li>
</ul>
</div>
$scope.new is a variable..that i am trying to access in ng-repeat but ng-repeat treats 'new' as a local variable and changes its value within its scope only...i want to give particular index to $scope.new variable...without using functions...thank you....
<html>
<style>
.yoyo{font-size:30px;}
</style>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
$scope.new=0;
});
</script>
<body>
<div data-ng-app="myApp" ng-controller="customersCtrl" data-ng-init="names=['Jani','Hege','Kai']">
<p>Looping with ng-repeat:</p>
<ul>
<li data-ng-repeat="x in names" ng-click="new=$index" ng-class="yoyo:new==$index">
{{ x }}{{$index}}{{new}}
</li>
</ul>
</body>
</html>
ng-repeat uses isolated scope, so when you are trying to update new variable inside ng-repeat, its updating the local $scope
use $parent.new instead of only new in ng-click directive. refer below working code snippet -
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
$scope.new=0;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body>
<div data-ng-app="myApp" ng-controller="customersCtrl" data-ng-init="names=['Jani','Hege','Kai']">
<p>Looping with ng-repeat:</p>
<ul>
<li data-ng-repeat="x in names" ng-click="$parent.new=$index" ng-class="yoyo:new==$index">
{{ x }}{{$index}}{{new}}
</li>
</ul>
</div>
</body>
Hope this helps!
I want to show and hide a div with ng-show directive.
Here is my HTML file:
<body ng-app="my-app">
<div ng-controller="MainController">
<ul ng-show="isVisible" id="context-menu">
<li> Menu item 1 </li>
<li> Menu item 2 </li>
</ul>
</div>
</body>
Here is my CoffeeScript file:
myApp = angular.module("myApp", [])
myApp.controller "MainController", ["$scope", ($scope) ->
$scope.isVisible = false
]
Here is the codepen for it.
What is the problem? Can you help?
The issue with your code is :
<body ng-app="my-app">
It should be:
<body ng-app="myApp">
Don't confuse how you define attributes with their values.
http://codepen.io/anon/pen/AHxEw
Having trouble getting a simple sortable demo for angular-ui going here- http://jsfiddle.net/B3YDr/:
<div ng-app="myApp" ng-controller="myCtrl">
<ul ng-model="items" ui-sortable>
<li ng-repeat="item in items">{{item}}</li>
</ul>
<pre>{{items}}</pre>
</div>
angular.module('myApp', ['ui']);
var myCtrl = function($scope) {
$scope.items = ['One','Two','Three'];
};
Included jQuery & jQueryUI
Included AngularJS
Included AngularUI
Added 'ui' module as a dependency
I've copied the sample code almost like-for-like here http://angular-ui.github.io/#directives-sortable but still can't reorder list items.
Can anyone point out what is wrong? Thanks
You need to control the import order of scripts:
http://jsfiddle.net/B3YDr/4/
Put jquery before angular for angular to use it as element service.
<div ng-app="myApp" ng-controller="myCtrl">
<ul ng-model="items" ui-sortable>
<li ng-repeat="item in items">{{item}}</li>
</ul>
<pre>{{items}}</pre>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.2.0/ui-bootstrap-tpls.js"></script>
you can use methods in sortableOptions like below code
$scope.sortableOptions = {
handle: '.custom-ctrl-handle',
stop: function(e, ui) {
// console.log("stop function worked");
}
};