angularjs-ng-repeat | 易学教程

ngRepeat Filter by deep property

阅读更多关于 ngRepeat Filter by deep property

If I have a complex object with objects as property values, how can I filter by one of the nested properties? Can this be done with the OOB ng-repeat filter? Data { Name: 'John Smith', Manager: { id: 123, Name: 'Bill Lumburg' } } ngRepeat <li ng-repeat="e in emps | filter:Manager.Name">{{ e.Name }}</li> You need to pass in the argument to filter by: <input ng-model="filter.key"> <ul> <li ng-repeat="e in list | filter: {Manager: {Name: filter.key}}"> {{e.Name}} (Manager: {{e.Manager.Name}}) </li> </ul> Example on Plunker If you are filtering multiple properties then the syntax would be similar

Angular filter exactly on object key

阅读更多关于 Angular filter exactly on object key

问题 I have a small angular app like so: html <body ng-app> <div ng-controller="Ctrl"> <div ng-repeat="user in users | filter:1"> <span>{{ user.username }}, {{ user.id }}</span> </div> </div> </body> app.js function Ctrl($scope) { $scope.users = [ {"id":1,"username":"simon",}, {"id":8,"username":"betty",}, {"id":14,"username":"archie",}, {"id":3,"username":"jumbo1"}, ] } output simon, 1 archie, 14 jumbo1, 3 What I want to do is filter an exact match for filter argument AND filter on the id field

Angular - Can't make ng-repeat orderBy work

阅读更多关于 Angular - Can't make ng-repeat orderBy work

I've tried many examples of ng-repeat with orderBy, but I can't make my json work with it. <div ng-app> <script type="text/javascript" src="http://code.angularjs.org/1.0.1/angular-1.0.1.js"></script> <div ng:controller="Main"> <div ng-repeat="release in releases| orderBy:'environment_id'"> {{release.environment_id}} </div> </div> </div> And the JSON function Main($scope) { $scope.releases = { "tvl-c-wbap001 + tvl-webapp": { "timestamp": " 05:05:53 PM ", "environment_id": "CERT5", "release_header": "Projects/Dev", "date": "19 Oct", "release": "12.11.91-1" }, "tvl-c-wbap401 + tvl-webapp": {

Preserve line breaks in angularjs

阅读更多关于 Preserve line breaks in angularjs

I have seen this SO question. My code instead of ng-bind="item.desc" uses {{item.desc}} because I have a ng-repeat before. So my code: <div ng-repeat="item in items"> {{item.description}} </div> The item description contains \n for newlines which are not rendered. How can the {{item.description}} display the newlines easily assuming that I have the ng-repeat above? Based on @pilau s answer - but with an improvement that even the accepted answer does not have. <div class="angular-with-newlines" ng-repeat="item in items"> {{item.description}} </div> /* in the css file or in a style block */

shuffle array in ng-repeat angular

阅读更多关于 shuffle array in ng-repeat angular

问题 I'm creating a quiz and every time I start the quiz I want to shuffle the questions, so that they won't appear in the same order every time. I have this in my html code: <div ng-repeat="question in questions | filter:ids | orderBy:randomSort"> <div id="question">{{question.question}}</div><img id="nextImg" ng-src="../app/img/next.png" ng-click="next()" /> <img class="quizImg" ng-hide="{{question.image}}==null" ng-src="{{question.image}}" /> <div class="answer" ng-repeat="answer in question

angularjs text area character counter

阅读更多关于 angularjs text area character counter

问题 Hi I have a characeter counter for a text area. My problem is that it doesn't count spaces or linebreaks. How do I make it so that it does so? <div class="controls"> <textarea rows="4" cols="50" maxlength="1500" data-ng-minLength="1" data-ng model="createprofilefields.description" required highlight-on- error></textarea> <br />  <span class="form-help">{{1500-createprofilefields.description.length}} Characters</span> </div> 回答1: It's because angularJS automatically trimmed your

How to obtain previous item in ng-repeat?

阅读更多关于 How to obtain previous item in ng-repeat?

问题 I have a template in which I want to generate some HTML only if the current item has some different fields from the previous item. How can I access the previous item in an ng-repeat? 回答1: You can do something like <div ng-app="test-app" ng-controller="MyController"> <ul id="contents"> <li ng-repeat="content in contents"> <div class="title">{{$index}} - {{content.title}} - {{contents[$index - 1]}}</div> </li> </ul> </div> JS var app = angular.module('test-app', []); app.controller(

angular ng-repeat in reverse

阅读更多关于 angular ng-repeat in reverse

How can i get a reversed array in angular? i'm trying to use orderBy filter, but it needs a predicate(e.g. 'name') to sort: <tr ng-repeat="friend in friends | orderBy:'name':true"> <td>{{friend.name}}</td> <td>{{friend.phone}}</td> <td>{{friend.age}}</td> <tr> Is there a way to reverse original array, without sorting. like that: <tr ng-repeat="friend in friends | orderBy:'':true"> <td>{{friend.name}}</td> <td>{{friend.phone}}</td> <td>{{friend.age}}</td> <tr> I would suggest using a custom filter such as this: app.filter('reverse', function() { return function(items) { return items.slice()

orderBy multiple fields in Angular

阅读更多关于 orderBy multiple fields in Angular

How to sort by using multiple fields at same time in angular? fist by group and then by sub-group for Example $scope.divisions = [{'group':1,'sub':1}, {'group':2,'sub':10}, {'group':1,'sub':2},{'group':1,'sub':20},{'group':2,'sub':1}, {'group':2,'sub':11}]; I wanted to display this as group : Sub-group 1 - 1 1 - 2 1 - 20 2 - 1 2 - 10 2 - 11 <select ng-model="divs" ng-options="(d.group+' - '+d.sub) for d in divisions | orderBy:'group' | orderBy:'sub'" /> Please see this: http://jsfiddle.net/JSWorld/Hp4W7/32/ <div ng-repeat="division in divisions | orderBy:['group','sub']">{{division.group}}-{

Binding inputs to an array of primitives using ngRepeat => uneditable inputs

阅读更多关于 Binding inputs to an array of primitives using ngRepeat => uneditable inputs

问题 Here is a demo to my problem. $scope.myNumbers = [10, 20, 30]; <div ng-repeat="num in myNumbers"> <input type="text" ng-model="num"> <div>current scope: {{num}}</div> </div> Can anyone explain to me why are the inputs uneditable/readonly? If it's by design, what's the rationale behind? UPDATE 2/20/2014 It looks like this is no longer an issue for v1.2.0+ Demo. But do keep in mind that although the user controls are now editable with the newer angularJS versions, it is the num property in the