$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!
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>
Please look at the following code:
<html lang="en" >
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="flexbox" >
<div id="wrapper" ng-controller="flex-ctrl as ctrl">
<div id="aside">
<p ng-repeat="item in ctrl.buttons"> {{item}} </p>
</div>
</div>
</body>
</html>
var app = angular.module("flexbox", []);
app.controller("flex-ctrl", ['$scope', function($scope) {
$scope.buttons = ['a','b', 'c'];
}]);
I expect to see three <p> items. However, it looks like ng-repeat is ignored and I see an empty page.
Do you know what is the problem?
For your convenience: http://codepen.io/CrazySynthax/pen/yVwWdo
Use this.buttons instead of $scope.buttons since you are using controller as syntax
var app = angular.module("flexbox", []);
app.controller("flex-ctrl", ['$scope', function($scope) {
this.buttons = ['a','b', 'c'];
}]);
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
</head>
<body ng-app='flexbox'>
<div id="wrapper" ng-controller="flex-ctrl as ctrl">
<div id="aside">
<p ng-repeat="item in ctrl.buttons"> {{item}} </p>
</div>
</div>
</body>
</html>
Since you are using controller as syntax you can change your ctrl like so:
var app = angular.module("flexbox", []);
app.controller("flex-ctrl", [function() {
var vm = this;
vm.buttons = ['a','b', 'c'];
}]);
hope it helps.
Your variable is in $scope, so you can just loop over it with:
<p ng-repeat="item in buttons"> {{item}} </p>
Instead of
<p ng-repeat="item in ctrl.buttons"> {{item}} </p>
Forked your Codepen here.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<button ng-click="call('d')">for d</button>
<button ng-click="call('f')">for f</button>
<ul>
<li ng-repeat="x in a.{{replace}}">
{{x}}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
$scope.a = {
d:[1,2,3,4,5],
f:[6,7,8,9]
};
$scope.call = function(val) {
$scope.replace='val';
}
});
</script>
</body>
</html>
I'm trying to add dynamically the values to ng-repeat content, but it's not working, please do help
can we add dynamically values to ng-repeat itself so we can change the iterating values every time by simply changing one value like above, if not is there any better ideas
The following snippet can help you.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<button ng-click="call('d')">for d</button>
<button ng-click="call('f')">for f</button>
<ul>
<li ng-repeat="x in a[replace]">
{{x}}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function ($scope) {
$scope.a = {
d: [1, 2, 3, 4, 5],
f: [6, 7, 8, 9]
}
$scope.call = function (val) {
$scope.replace = val;
}
});
</script>
</body>
</html>
Explanation :
$scope.replace=val; //Assign the variable and not a string
<li ng-repeat="x in a[replace]"> // No need to use braces are you are in an ng tag already
Instead of passing strings you can pass the values in the call function then assign those values to $scope.replace which then update your ng-repeat
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"> </script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<button ng-click="call(a.d)">for d</button>
<button ng-click="call(a.f)">for f</button>
<ul>
<li ng-repeat="x in replace">
{{x}}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
$scope.a = {
d: [1,2,3,4,5],
f: [6,7,8,9]
}
$scope.call = function(val){
$scope.replace=val;}
}
);
</script>
</body>
</html>
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>