I want to change {{order.status}} to def when someone click updatestatus button.
<ul>
<li ng-repeat="order in orders">
<!--
<div ng-model="row[order.id]" >abc</div>
-->
<div ng-model="row[order.id]" >{{order.status}}</div>
updatestatus
</li>
</ul>
Controller
$scope.row = {};
$scope.changestatus = function(id) {
//console.log(id);
$scope.row[id] = 'def';
}
It does not work. Please help.
You don't need ng-model here. ng-model is used for inputs, textarea, select or custom form elements https://docs.angularjs.org/api/ng/directive/ngModel
<ul>
<li ng-repeat="order in orders">
<div>{{ row[order.id] }}</div>
updatestatus
</li>
</ul>
Here, you just need to update the view. For this ng-bind is used https://docs.angularjs.org/api/ng/directive/ngBind
<div> ng-bind="row[order.id]"></div> and <div>{{ row[order.id] }}</div> are similar
UPDATE
<ul>
<li ng-repeat="order in orders">
<div>{{ order.status }}</div>
Update Status
</li>
</ul>
Controller:
$scope.changestatus = function(order) {
//console.log(order.id);
order.status = 'the update status'; // status changed
}
Use {{row[order.id]}} instead of abc in your view and remove ng-model within your div.
<ul>
<li ng-repeat="order in orders">
<div>{{ row[order.id] }}</div>
updatestatus
</li>
</ul>
Or
<ul>
<li ng-repeat="order in orders">
<div ng-bind="row[order.id]"></div>
updatestatus
</li>
</ul>
Related
I have a html code:
<div class="col-xs-6">
<ul class="list-group itemList">
<li class="list-group-item" ng-repeat="(id, product) in drinks" ng-click="addToShoppingList(id)">
<strong>{{ product.name }}</strong> - {{ product.price | currency }}
</li>
</ul>
</div>
And the Angular code:
$scope.addToShoppingList = function(id){
};
I just want the id element to disappear (hide, fadeOut etc), when it's clicked. I bet it's something about the ng-hide but for now I'm too dumby for that.
Thanks for any answers.
Edit: It should be inside the addToShoppingList function.
Edit2: This is the whole function:
$scope.addToShoppingList = function(id){
$scope.itemsToBuy.push($scope.drinks[id]);
};
When the li element is clicked, it pushes that element to the new array. And then it should be hidden.
Edit3: If I want to cancel it and make the items come back to the array, the result is strange.
You could do something like this:
<div ng-controller="MyCtrl2">
<h2>Hide each LI:</h2>
<ul>
<li ng-click="pushItem(suggestion)" ng-repeat="suggestion in results" ng-click="visible = false">
{{suggestion}}
</li>
</ul>
</div>
Below is the angular code:
var myApp = angular.module('myApp',[]);
function MyCtrl2($scope) {
$scope.results = [1, 2, 3, 4];
$scope.itemsToBuy = [];
$scope.pushItem = function(item){
$scope.itemsToBuy.push(item);
$scope.results.splice($scope.results.indexOf(item),1);
}
}
JS Fiddle on the same:
http://jsfiddle.net/59gdo817/
On the vice-versa, just add the item back to results array to show the li back.
You can add a new status to the $scope.drinks array called isHidden which will track whether or not the item is hidden. When the user clicks on that li, the function will set isHidden to true and the ng-hide will immediately cause it to hide from the DOM.
<div class="col-xs-6">
<ul class="list-group itemList">
<li class="list-group-item" ng-repeat="(id, product) in drinks" ng-click="addToShoppingList(id)" ng-hide="product.isHidden===true">
<strong>{{ product.name }}</strong> - {{ product.price | currency }}
</li>
</ul>
</div>
$scope.addToShoppingList = function(id){
$scope.itemsToBuy.push($scope.drinks[id]);
$scope.drinks[id].isHidden = true;
};
How about this:
<div class="col-xs-6">
<ul class="list-group itemList">
<li class="list-group-item" ng-repeat="(id, product) in drinks" ng-click="addToShoppingList(id);" ng-hide='product.hidden'>
<strong>{{ product.name }}</strong> - {{ product.price | currency }}
</li>
</ul>
</div>
And in your addToShoppingList, you can set the product to hidden:
$scope.addToShoppingList = function(id){
$scope.itemsToBuy.push($scope.drinks[id]);
$scope.drinks[id].hidden = true;
};
I have two iterations, one list and its wrapper. I want to add a class when I click on the item. But now the class added all wrapper list item. Please see the below link.
$scope.select= function(index) {
$scope.selected = index;
};
https://jsfiddle.net/9me2L1ev/
Please anyone help me. Thanks
Vimal
You need to do something like this you have logical error.
<div ng-app='app' class="filters_ct" ng-controller="selectFilter">
<div ng-repeat="filter1 in filters">
<ul>
<li ng-repeat="filter in filters" ng-click="filter1[selected] = $index " ng-class="{active: $index == filter1[selected]}">
<span class="filters_ct_status"></span>
{{filter.time}}
</li>
</ul>
</div></div>
check out updated fiddle link
You need to combo two $index value. Reference to parent $index using $parent.$index
ng-click="select($parent.$index, $index)" ng-class="{active: $parent.$index + '.' + $index == selected}"
and
$scope.select= function(parentIndex, index) {
$scope.selected = parentIndex + '.' + index;
};
Check this https://jsfiddle.net/56dc8dej/
I have updated code in his link
<div ng-app='app' class="filters_ct" ng-controller="selectFilter">
<div>
<ul>
<li ng-repeat="filter in filters" ng-click="select($index)" ng-class="{active: $index == selected}">
<span class="filters_ct_status"></span>
{{filter.time}}
</li>
</ul>
</div></div>
you need to consider the parent index...
<div ng-app='app' class="filters_ct" ng-controller="selectFilter">
<div ng-repeat="filter1 in filters">
<ul>
<li ng-repeat="filter in filters" ng-click="select($parent.$index, $index)" ng-class="{active: $parent.$index+','+$index == selected }">
<span class="filters_ct_status"></span>
{{filter.time}}
</li>
</ul>
</div>
</div>
And in you controller:
...
$scope.select= function(pindex, index) {
$scope.selected = pindex+','+index;
};
...
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) ;
}
I need the following:
<ul>
<li data-ng-repeat="person in row1">
<img data-ng-src="img/{{person.code}}.jpg">
<h3>{{person.name}}</h3>
<p>{{person.description}}</p>
</li>
</ul>
<ul>
<li data-ng-repeat="person in row2">
<img data-ng-src="img/{{person.code}}.jpg">
<h3>{{person.name}}</h3>
<p>{{person.description}}</p>
</li>
</ul>
but I don't want to duplicate the html - I want to be able to pass in the two different arrays (row1 and row2) to ng-include or something similar. How can I do this in AngularJS?
You can give the array of rows to another model and use ng-repeat in ul tag
In your controller:
$scope.rows = [row1, row2];
In your template:
<ul ng-repeat="row in rows">
<li ng-repeat="person in row">
<img data-ng-src="img/{{person.code}}.jpg">
<h3>{{person.name}}</h3>
<p>{{person.description}}</p>
</li>
</ul>
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>