angularjs-ng-repeat | 易学教程

angularjs ng-repeat with filter and track by $index not working

阅读更多关于 angularjs ng-repeat with filter and track by $index not working

问题 im trying to put some videos, which name is located in this json file, inside a div, this is the json file: { "videos": { "name": [ "dfg.webm", "fdgh.mp4" ] } } this is the script: (function(){ var app=angular.module("index",[]); var videoUrl=function(name){ alert("asd"); return "./videos/"+name; }; app.filter('videoUrl',function(){alert("asd");return videoUrl;}); var mainController=function($scope,$http){ var videosSuccess=function(response){ $scope.videosJSON=response.data; }; var

AngularJS - A simple infinite scroll

阅读更多关于 AngularJS - A simple infinite scroll

问题 I am trying to write a similar small infinite scroll to the one found here: http://jsfiddle.net/vojtajina/U7Bz9/ I've been able to display the first 5 pieces of data, however on scroll, the further items are not being displayed. HTML: <div id="fixed" directive-when-scrolled="loadMore()"> <ul> <li ng-repeat="i in items | limitTo: 5">{{ i.Title }}</li> </ul> </div> JS: var app = angular.module('app', []); app.controller('MainCtrl', function($scope) { $scope.name = 'World'; $scope.items = [ {

Unable to reduce the number of watchers in ng-repeat

阅读更多关于 Unable to reduce the number of watchers in ng-repeat

问题 In a performance purpose, i wanted to remove the double data-binding (so, the associated watchers) from my ng-repeat. It loads 30 items, and those data are static once loaded, so no need for double data binding. The thing is that the watcher amount remains the same on that page, no matter how i do it. Let say : <div ng-repeat='stuff in stuffs'> // nothing in here </div> Watchers amount is 211 (there is other binding on that page, not only ng-repeat) <div ng-repeat='stuff in ::stuffs'> //

Angular js : controller alias not working

阅读更多关于 Angular js : controller alias not working

问题 I'm using many controllers in the same page, and so that the code is clearer, for each controller I added an alias. But, when I'm use an alias, I can't access properties, functions. This code works well This code doesn't work What's the difference please. 回答1: When using the "controller as" construct, you define properties using the controller's this scope rather than the $scope object. So your controller for the second example should be: function MyCtrl($scope) { this.items = m; } In your

AngularJS : how to reflect a variable change in one directive into another directive while using ng-repeat

阅读更多关于 AngularJS : how to reflect a variable change in one directive into another directive while using ng-repeat

In first case : I implemented a directive directive2 that will change bar value which will also get reflected in directive1 . Here u can find the plunkr (1st case) In second case :I implemented a directive directive2 , with ng-repeat used along with this directive that changes bar value and this is supposed to get reflected in directive1 . Here u can find the plunkr for directive2 with ng-repeat (2nd case) How i expect it to work : i want the bar in directive1 to change according to the change in directive2 My question: 1st case is working the way i want. In the 2nd case my bar value in

Advice on creating a matrix table in angular JS

阅读更多关于 Advice on creating a matrix table in angular JS

Below is my JSON object(partial) which I would like to show as a matrix table preferably using ng-repeat: [ { "product": "milk", "resource": "a", "checked": true }, { "product": "bread", "resource": "a", "checked": false }, { "product": "butter", "resource": "a", "checked": true } ] I have tried http://plnkr.co/edit/iW1dZV?p=info but I don't want to use coffeescript. @forgottofly here is an example of better json for what you need: [{ "resource": "a", products: [{ "product": "milk", "checked": true }, { "product": "bread", "checked": false }, { "product": "butter", "checked": true }] }, {

Angular JS table with ng-repeat and radio buttons

阅读更多关于 Angular JS table with ng-repeat and radio buttons

问题 I am trying to make a table using ng-repeat that has a radio button selector at the start of each row. The table looks like this: <table> <tbody> <tr ng-repeat="model in modelList"> <td> <input type="radio" ng-model="model.select"></input> </td> <td>{{ model.NDPName }}</td> <td>{{ model.OEM }}</td> <td>{{ model.version }}</td> <td>{{ model.dateAdded }}</td> <td>{{ model.validUntil }}</td> </tr> </tbody> </table> The ng-repeat is taking from a modelList that looks like: $scope.modelList = [ {

How to convert string to number or date in angularjs expression

阅读更多关于 How to convert string to number or date in angularjs expression

问题 I am using angularjs to make a pagination type of thing, say I have a 2D array and I am displaying the values from it. Its working fine but I also want to be able to edit thoes values so I used ng-hide in input tag and its working fine but the problem is that if the type of input is number or date and the type of my array values is string then the values are not displayed in the editable input boxes. Code: <table class="table table-hover"> <thead> <tr class="active"> <th class="id">Label</th>

Remove duplicate from ng-repeat [duplicate]

阅读更多关于 Remove duplicate from ng-repeat [duplicate]

This question already has answers here : How to get unique values in an array (29 answers) Closed last year . I have a very simple array that has duplicate values. My array is like this: $scope.type= ["Bar", "Pie", "Line", "Line", "Line", "Line", "Line", "Line", "map", "Line", "Bar", "Pie", "Pie", "Pie", "Pie", "Pie", "Pie", "Pie"] in my ng-repeat, I have this condition ng-repeat = types in type track by $index How can I display only the unique values from my array in ng-repeat? You can use unique filter while using ng-repeat . ng-repeat="type in types|unique: type" var app = angular.module(

How to insert $compile'd HTML code inside the directive without getting $digest recursion error?

阅读更多关于 How to insert $compile'd HTML code inside the directive without getting $digest recursion error?

I have a directive that, depending on the ng-repeat item data (from the database), build custom HTML with a switch case: app.directive('steps', function($compile){ return { 'restrict': 'A', 'template': '<h3>{{step.name}}</h3><ul ng-repeat="opt in step.opts"><div ng-bind-html-unsafe="extra(opt)"></div></ul>', 'link': function($scope, $element){ $scope.extra = function(opt){ switch ($scope.step.id){ case 1: return "<div>Some extra information<select>...</select></div>" case 2: return "<div><input type='checkbox' ng-model='accept'> Accept terms</div>" case 3: return "<div>{{step.title}}<select