angularjs-ng-repeat | 易学教程

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? Arun P Johny 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('MyController', function($scope){ $scope.contents=[{ title: 'First' }, { title: 'Second' }, { title: 'Third

AngularJS filter based on array of strings?

阅读更多关于 AngularJS filter based on array of strings?

I'm having a hard time wrapping my head around how to go about doing an Angular filter to solve a problem that I'm running into. Here's a basic example of my data structure, an array of tasks: var tasks = [ { Title: "This is a task title", Tags: ["Test","Tag","One","Two","Three"] }, { Title: "Another test tag title", Tags: ["Some", "More", "Tags"] }, { Title: "One more, why not", Tags: ["I","Like","Dirt"] }, { Title: "Last one!", Tags: ["You","Like","Dirt"] } ]; So each object has an array of tags. For the sake of example let's say I am outputting each of those objects as a row in a table.

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 child scopes , not the parent scope, that get modified. In another words, modifying the values in the

How to highlight a selected row in ngRepeat?

阅读更多关于 How to highlight a selected row in ngRepeat?

I couldn't find something that will help me to solve this simple issue in Angular. All the answers are relevant for navigation bars when a comparison is being made against location path. I've built a dynamic table using list and ngRepeat . When I click a row I'm trying to assign this row a css class, selected, to highlight the fact that this row has been selected by user, and remove the .selected from previously highlighted row. I'm missing the method to bind between the row that been selected and the css class assignment. I applied on each row ( ul ) ng-click="setSelected()" But I'm missing

Highlighting a filtered result in AngularJS

阅读更多关于 Highlighting a filtered result in AngularJS

I'm using a ng-repeat and filter in angularJS like the phones tutorial but I'd like to highlight the search results in the page. With basic jQuery I would have simply parsed the page on key up on the input, but I'm trying to do it the angular way. Any ideas ? My code : <input id="search" type="text" placeholder="Recherche DCI" ng-model="search_query" autofocus> <tr ng-repeat="dci in dcis | filter:search_query"> <td class='marque'>{{dci.marque}} ®</td> <td class="dci">{{dci.dci}}</td> </tr> In did that for AngularJS v1.2+ HTML: <span ng-bind-html="highlight(textToSearchThrough, searchText)"><

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 ONLY. Basically, I want the output to be: output simon, 1 I am using Angular 1.2. In Angular 1.1.3 or

How can I animate sorting a list with orderBy using ng-repeat with ng-animate?

阅读更多关于 How can I animate sorting a list with orderBy using ng-repeat with ng-animate?

I'm rendering a list of objects using ng-repeat with an orderBy filter like this: <li class="list-item" ng-repeat="item in items | orderBy:predicate:reverse"> My attempts to ng-animate a change in sorting of the list have proven frustrating and aren't worth sharing. I have seen the Yearofmoo example app here . Unfortunately this demonstration is not quite what I'm trying to achieve. I need to animate the X position of a given list item when it is placed in a new order after the orderBy definition changes. I have tried to accomplish this with css transitions and absolute positioning, but ng

How to $watch changes on models created by ng-repeat?

阅读更多关于 How to $watch changes on models created by ng-repeat?

问题 Consider this Plnkr for example. I don't know how many members of fooCollection will be created beforehand. So I don't know how many bar models are going to exist. But I know they are going to be angular models, and I know where they are going to be. How do I do a $watch on these? I need to do that because I need to trigger behavior when a bar model is changed. Watching the fooCollection itself is not enough, the $watch listener does not fire when a bar is changed. Relevant html: <body ng

angularjs ng-style: background-image isn't working

阅读更多关于 angularjs ng-style: background-image isn't working

问题 I'm trying to apply a background image to a div by using the angular ng-style ( I tried a custom directive before with the same behaviour ), but it doesn't seem to be working. <nav class="navigation-grid-container" data-ng-class="{ bigger: isNavActive == true }" data-ng-controller="NavigationCtrl" data-ng-mouseenter="isNavActive = true; $parent.isNavActive = true" data-ng-mouseleave="isNavActive = false; $parent.isNavActive = false" data-ng-show="$parent.navInvisible == false" data-ng-animate

Why the inputs are not working right with ng-repeat [duplicate]

阅读更多关于 Why the inputs are not working right with ng-repeat [duplicate]

This question already has an answer here: What are the nuances of scope prototypal / prototypical inheritance in AngularJS? 3 answers Could someone explain to me why I can't get the current selected radio-button in this simple example. I'm trying to generate dynamically the radio-buttons with an ng-repeat directive and get the current radio-button selected using ng-model. Like this: Template: <div ng-repeat="kind in movieKinds"> <input type="radio" name="movies" ng-value="kind" ng-model="kindSelected"> {{kind.name}}<br> </div> Selected Movie :{{kindSelected}} Controller: mymodule.controller(