I need to add a class on selected <li> like I have shown in demo but dont want it to be removed if I click on another <li>.
Please help
<div ng-app="myApp">
<ul ng-controller="myCtrl">
<li ng-repeat="item in model.items" class="commonClass" ng-class="{'on': model.selected==item}" ng-click="model.selected=item">{{ item.name }}</li>
</ul>
</div>
JS
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.model = {
selected: null,
items : [
{name: "Apple"},
{name: "Banana"},
{name: "California"}
]
};
})
demo
Just add like this
<div ng-app="myApp">
<ul ng-controller="myCtrl">
<li ng-repeat="item in model.items" class="commonClass" ng-class="{'on': selected==$index}" ng-click="selected=$index">{{ item.name }}</li>
</ul>
</div>
Related
In Angular, I have an array like this:
$scope.items =["blue","red","pink","yellow"];
And another object (that I use for filtering)
$scope.filter={"color":{"blue":true, "pink":true},"shape":{"square":true}};
I would like to do a ng-if, so that
<ul>
<li ng-repeat="n in items" ng-if="n in filter.color">
</li>
</ul>
The ng-repeat would just display the elements in the $scope.items that exist in the $scope.filter
So, in other words, it would just display blue and pink
Thanks in advance!
You need a custom filter function:
<ul>
<li ng-repeat="n in items | filter: yourFilter">
</li>
</ul>
$scope.filter={"color":{"blue":true, "pink":true},"shape":{"square":true}};
$scope.yourFilter = function(item) {
//will be true when color has a property with the color and it's true
return $scope.filter.color[item];
}
Since $scope.items is an array and $scope.filter is an object, you need a function to test the values:
angular.module('test', []).controller('testController', function($scope)
{
$scope.items =["blue","red","pink","yellow"];
$scope.filter={"color":{"blue":true, "pink":true}};
$scope.checkColor = function(value, index, array)
{
return $scope.filter.color[value];
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="test">
<div ng-controller="testController">
<ul>
<li ng-repeat="n in items | filter : checkColor">{{n}}</li>
</ul>
</div>
</body>
I need to have the possibility to print out a possible infinite deep array-structure into a list. Here's the code from a modified AngularJS-example where I have added some more deep children in the array. How can I print child of child and even its children as well? Is there a way I can get it to repeat forever as long as there is more children?
HTML
<div ng-app>
<div ng-controller="TodoCtrl">
<ul>
<li ng-repeat="todo in todos">
<span>{{todo.text}}</span>
<ul>
<li ng-repeat="child in todo.children">
<span>{{child.text}}</span>
<!-- What about the next one -->
</li>
</ul>
</li>
</ul>
</div>
</div>
JS
function TodoCtrl($scope) {
$scope.todos = [{
text: 'root 1',
children: [{
text: 'child of root 1',
children: [{
text: 'child of child',
children: []
}]
}]
}, {
text: 'root 2',
children: []
}];
}
Fiddle: https://jsfiddle.net/U3pVM/25866/
You can use the view recursively this way:
<script type="text/ng-template" id="todo.html">
<div>
<div>{{ todo.text }}</div>
<ul>
<li ng-repeat="todo in todo.children" ng-include="'todo.html'"></li>
</ul>
</div>
</script>
<div ng-controller="MyController">
<ul>
<li ng-repeat="todo in todos" ng-include="'todo.html'"></li>
</ul>
</div>
Here the DEMO based on your sample data.
The ng repeat is not working for my angular code.
Here is the partial:
<section class="artistpage">
<ul class="artistlist">
<li ng-model = "questions" ng-repeat="item in questions">
<input type="checkbox" name = "q">{{item.ct}}
</input>
</li>
</ul>
</section>
Here is the Controller:
var testControllers = angular.module('testControllers', []);
testControllers.controller('ListController', ['$scope', '$http', function($scope, $http) {
$http.get('js/cat.json').success(function(data) {
$scope.questions = data;
});
}]);
The data:
[
{
"info":{
"cid":1,
"ct":"T1",
"ctg":"math",
"pcid":78
}
},
{
"info":{
"cid":2,
"ct":"T2",
"ctg":"math",
"pcid":78
}
},
{
"info":{
"cid":3,
"ct":"T3",
"ctg":"Py",
"pcid":2
}
}
]
I have not been able to figure out why this is not working. Help please!
The problem here is you are not accessing the object info, you should access each element info and get the value
change your ng-repeat like this,
<li ng-model = "question" ng-repeat="item in questions">
{{item.info.ct}}
</li>
Working Plunker
You just need to replace {{item.ct}} with {{item.info.ct}} as you have object info inside your outer object. Check FIDDLE
<section class="artistpage">
<ul class="artistlist">
<li ng-model = "questions" ng-repeat="item in questions">
<input type="checkbox" name = "q"/>{{item.info.ct}}
</li>
</ul>
</section>
<section class="artistpage">
<ul class="artistlist">
<li ng-model = "question" ng-repeat="item in questions">
<input type="checkbox" name = "q">{{item.ct}}
</input>
</li>
</ul>
</section>
--------------use this-----------
<section class="artistpage">
<ul class="artistlist">
<li ng-model = "question" ng-repeat="item in questions">
<input type="checkbox" name = "q">{{item.info.ct}}
</input>
</li>
</ul>
</section>
ng-model should not be the same. so use ng-model="question" instead of questions
Here is plunker
View live code:
Angular JS
How in the world do I properly loop through nested key value pairs and properly output them like below?
View I want is a tree like so
-touts
-classes
-col-12
-col-md-12
-col-lg-12
Currently the view is:
touts
{"classes":["col-12","col-md-12","col-lg-12"]}
JS:
var currentApp = angular.module('currentApp', []);
currentApp.controller('ACtrl', function($scope){
$scope.templates = {
'touts' : [
{
'classes' : ['col-12', 'col-md-12', 'col-lg-12' ]
}
]
};
});
HTML:
<div ng-app="currentApp">
<div ng-controller="ACtrl">
<ul ng-repeat="(key, prop) in templates">
<li>{{key}}</li>
<li>
<ul ng-repeat="class in templates[key]">
<li>{{class}}</li>
</ul>
</li>
</ul>
</div>
</div>
You are pretty close, I updated the fiddle. http://jsfiddle.net/y9wj6/9/
<ul ng-repeat="(key, prop) in templates">
<li>{{key}}</li>
<ul ng-repeat="val in prop">
<ul ng-repeat="(o, values) in val">
<li>{{o}}</li>
<ul ng-repeat="i in values">
<li>{{i}}</li>
</ul
</ul>
</ul>
</ul>
You must think gradually.
templates = {'touts' : [{'classes' : ['col-12', 'col-md-12', 'col-lg-12' ] }]};
// key = 'touts'
// props = [{'classes' : ['col-12', 'col-md-12', 'col-lg-12' ] }]
// props[0] = {'classes' : ['col-12', 'col-md-12', 'col-lg-12' ] }
// classkey = 'classes'
// classprop = ['col-12', 'col-md-12', 'col-lg-12' ]
// and print classprop by ng-repeat
So you can try this:
<div ng-app="currentApp">
<div ng-controller="ACtrl">
<ul ng-repeat="(key, props) in templates">
<li>{{key}}</li>
<li>
<ul ng-repeat="(classkey, classprop) in props">
<li>{{classkey}}</li>
<li>
<ul>
<li ng-repeat="class in classprop">
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
So this is pretty old question, however if you modified the object a bit (swap the array types for objects) the following template should work just fine.
angular.module('init', [])
.controller('test', ['$scope', function($scope) {
$scope.templates = {
'touts': {
'classes': {
'col-12': {},
'col-md-12': {},
'col-lg-12': {}
}
}
};
}]);
ul {
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="init" ng-controller="test">
<script type="text/ng-template" id="recursive_item.html">
{{key}}
<ul>
<li ng-repeat="(key, prop) in prop" ng-include="'recursive_item.html'"></li>
</ul>
</script>
<ul>
<li ng-repeat="(key, prop) in templates" ng-include="'recursive_item.html'"></li>
</ul>
</div>
I have a clickable drop-down List as following:
<ul class="dropdown">
<li ng-repeat="item in items" ng-controller="ListCtrl">
{{item.name}}
</li>
</ul>
I have following code of AngularJS in same html page :
<li ng-repeat="item in items" ng-controller="ListCtrl">
<div id="{{item.itemIndex}}">
Some Code Here
</div>
</li>
Now i want to add each div in to my page when click on the list item every time. I calling addWidget() function like this :
<script type="text/javascript">
function addWidget(){
document.getElementById('').style.display='block';
}
</script>
Now My question is if i assign a static id to div and passing it in to getElementByID then it works fine but in the dynamic case how i pass the id so it will work fine in each case ?
You don't want to be adding javascript like that.
Here is an example of how to do this:
<body ng-app="myApp">
<div ng-controller="ListCtrl">
<ul class="dropdown">
<li ng-repeat="item in items">
{{item.name}}
</li>
</ul>
<ul>
<li ng-repeat="item in items" ng-show="item.show">
<div>Some Code Here</div>
</li>
</ul>
</div>
</body>
And your controller:
function ListCtrl($scope){
$scope.items = [{name: 'one'}, {name: 'two'}];
$scope.addWidget = function(item){
item.show = !item.show;
};
};
And finally a working example is here on jsfiddle