I have two ng-repeat, now I want to add this into my second ng-repeat,
I have written the code below:
<ul>
<li data-ng-repeat="quotTypeOpt in list1">
<label>{{quotTypeOpt.text}}</label>
<ul>
<li data-ng-repeat="quotTyp in quotTypeOpt.list2">
<div ng-model="quotTyp.value = quotTypeOpt.value"></div>
<input type="text" ng-model="quotTyp.text" />
<label>{{quotTyp.value}}</label>
</li>
</ul>
</li>
</ul>
When I add line by this way ng-model="quotTyp.value = quotTypeOpt.value", then error has been occured but need is asign value from quotTypeOpt.value to quotTyp.value
Error: [ngModel:nonassign] Expression 'quotTyp.value = quotTypeOpt.value' is non-assignable
Plunker
Thanks
You're trying to initialize some variable. The best place to do so is ng-init.
So in your code, it goes like this :
<ul>
<li data-ng-repeat="quotTypeOpt in list1">
<label>{{quotTypeOpt.text}}</label>
<ul>
<li data-ng-repeat="quotTyp in quotTypeOpt.list2">
<div ng-model="quotTyp.value" ng-bind="quotTyp.value = quotTypeOpt.value"></div>
<input type="text" ng-model="quotTyp.text" />
<label>{{quotTyp.value}}</label>
</li>
</ul>
</li>
</ul>
Related
I have the following ng-repeat list. I want to convert it to checkboxes.
Currently, it is repeating the category headings in myJSON.mylist and then repeating each subitem in each category in list mode.
How can I convert the list type into checkbox type, so that ONLY subitems can be chosen?
<ul ng-repeat="s in myJSON.mylist">
<li type="checkbox"> {{s.item}}</li>
<ul >
<li type="checkbox" ng-repeat="subitem in s.subitems">
{{subitem.values}}</li>
</ul>
</ul>
here is a similar example.
you can go like this:
<div ng-repeat="sin myJSON.mylist">
<div > {{s.item}}</div>
<ul >
<li ng-repeat="subitem in s.subitems">
<input type="checkbox" name="myname"
ng-model="myModel.myname[subitem.values]">
{{subitem.values}}
</li>
</ul>
</div>
The difference is this:
You are using
<li type="checkbox"...
The example uses
<input type="checkbox" ...
Probably what you want is
<li><input type="checkbox" ...
Sample problem
<div ng-app="" ng-init="names=['Jani']">
<ul>
<li ng-repeat="x in names " >
<div ng:model="a[$index]" >
<div ng:init="a{{$index}}='1'">
{{a0}}
</div>
</div>
</li>
</ul>
</div>
In above code, I can create dynamic ngModel variable. but I want to initiate value 1 to ngModel dynamically. Please help me
I have a parse syntax error when i try this :
<div ng-repeat="post in posts" id="{{post.idFB}}">
<p>{{post.name}}</p>
<ul>
<li ng-repeat="feed in feed{{post.idFB}}">
<p>{{feed.title}}</p>
</li>
<ul>
</div>
problem is the line <li ng-repeat="feed in feed{{post.idFB}}">, what is the good syntax ?
result expected is like feed846097918756247
The online app: http://www.monde-du-rat.fr/pmr/
EDIT : jmb.mage solution :
<ul ng-init="myFeed = myFeedFunction(raterie.idFB);">
<li ng-repeat="feed in myFeed | limitTo:1">adoptions are : {{feed.title}}</li>
<li ng-repeat="feed in feed846097918756247 | limitTo:1">search is : {{feed.title}}</li>
<ul>
only second li works, not the first with the automatically variable
I'd use only a feed object as follow, scope.feed[scope.posts[index].idFB]= 'whatever'
<div ng-repeat="post in posts" id="{{post.idFB}}">
<p>{{post.name}}</p>
<ul>
<li ng-repeat="feed in feed[post.idFB]">
<p>{{feed.title}}</p>
</li>
<ul>
</div>
If feed846097918756247 is a JavaScript object than you could do something like this
<div ng-repeat="post in posts" id="{{post.idFB}}">
<p>{{post.name}}</p>
<ul ng-init="var myFeed = eval('feed' + post.idFB);">
<li ng-repeat="feed in myFeed">
<p>{{feed.title}}</p>
</li>
<ul>
</div>
Although since it's using eval(), you may need to do the ng-init with a function like:
<ul ng-init="var myFeed = myFeedFunction(post.idFB);">
and then have a function in your controller:
function myFeedFunction(pId) {
return eval('feed' + pId) ;
}
How can one, if at all possible, do the following:
<ul>
<li ng-reapeat="a in c"></li>
</ul>
with an output like this:
<ul>
<div>
<li></li> <--- from a to b (say first till 3rd element)
<li></li>
...
</div>
<div>
<li></li> <--- from b to c (4th element till end)
<li></li>
...
</div>
</ul>
Or even multiple <ul></ul> blocks. First one closing at a designated index, second one opening and continuing until the end.
What about slicing the array (probably not an "angular way"), for example
<ul>
<div>
<li ng-repeat="a in c.slice(0, 3)"></li>
</div>
<div>
<li ng-repeat="a in c.slice(3)"></li>
</div>
</ul>
General idea, you should be able to get what you want using this pattern
<ul>
<li ng-repeat-start="a in c" ng-show="$index<3"></li>
<li ng-repeat-end ng-show="$index>=3"></li>
</ul>
Try this:
I think you need multiple ul blocks.
<ul>
<div ng-reapeat="a in c">
<li ng-if="$index<3"></li>
</div>
</ul>
<ul>
<div ng-reapeat="a in c">
<li ng-if="$index>2"></li>
</div>
</ul>
Hope it helps...!
I am using angularjs to render a hierarchical structure. The test case is at http://jsbin.com/agodoj/1/edit
My question is why ng-repeat stop working at level 3 ? Thanks
Here is my model
function Test($scope) {
$scope.cars = {
chrylser: {
nameplates: [{
name: "np1",
trims: [
"tirm1", "trim2"
]
}]
}
};
}
Here is my template
<div ng-app ng-controller="Test">
<div ng-repeat="(key, value) in cars">
{{key}}
<ul>
<li ng-repeat="np in value.nameplates">{{np.name}}, {{np.trims}}</li>
<ul>
<li ng-repeat="trim in np.trims">
(ng-repeat stop working here) {{trim}}
</li>
</ul>
</ul>
</div>
</div>
Just need to move the closing </li> tag after your inner <ul>. You had the <li ng-repeat="np in value.nameplates"> immediately closing, ending the loop.
<div ng-app ng-controller="Test">
<div ng-repeat="(key, value) in cars">
{{key}}
<ul>
<li ng-repeat="np in value.nameplates">{{np.name}}, {{np.trims}}
<ul>
<li ng-repeat="trim in np.trims">
works! {{trim}}
</li>
</ul>
</li>
</ul>
</div>
</div>