标签: ng-repeat

我正在开发一个系统,我想在其中嵌套两个ng-repeat语句,以便我可以通过2D数组工作.我可以使用版本1.1.1成功完成任务,如下所示:

http://jsfiddle.net/skArT/1/

但是,当我使用完全相同的代码集并将Angular的版本更改为1.2.1时,代码将不再起作用并抛出错误:

http://jsfiddle.net/skArT/2/

错误:

Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: x in value, Duplicate key: number:0

所以我的问题是,如何使用较新版本的Angular完成1.1.1版中显示的任务？

我有一个低于JSON:

[{"brand":"abc"},{"brand":"xyz"},{"brand":"abc"},{"brand":"abc"},{"brand":"por"},{"brand":"xyz"}]

使用ng-repeat,我如何显示像 -

Brand Occurances
abc      (3)
xyz      (2)
por      (1)

即品牌名称(同一品牌名称的重复出现次数)？

我有以下菜单项

[ { "name": "Home", "target": "#home", "state": "active", "partial_html": "partials/home.html" }, { "name": "Find", "target": "#find", "partial_html": "partials/find.html", "state": "" }, { "name": "Albums", "target": "#albums", "partial_html": "partials/albums.html", "state": "" } ]

如何使用ng-repeat为每个元素获取以下输出(mi是数组menuItems中的项(上面给出了数组定义).

<li class='divider-vertical'></li>
<li class="{{mi.state}}"><a href="{{mi.target}}" ng-click="setMenuItemActive($event, mi.name)">{{mi.name}}</a></li>

我将如何使用ng-repeat重复多个具有此结构的div(其中每个div的邻域不同,但其余的将是相同的)？

<div id="neighborhood" ng-controller="WeatherController" ng-init="init('neighborhood')">
  <h1>It's currently {{weather}}</h1>
  <p>Sunny: {{sunny}}</p>
  <p>Foggy: {{foggy}}</p>
  <input type="button" value="Sunny" ng-click="sunny = sunny + 1"/>
  <input type="button" value="Foggy" ng-click="foggy = foggy + 1"/>
</div>

我想捕获按钮的点击事件.按钮的id在ng-repeat内动态生成.

.set(ng-repeat='button in ['4', '3' , '2', '1' ]')
   button(id='{{$index}}') button {{button}}

按钮4
按钮3
按钮2
按钮1

上面我把my-dir指令属性/类放在哪里？

.my-dir
  .set ...

以上不起作用.

和

.my-dir.set ...

多次执行链接功能.

/*下面的代码更详细,如果上面的陈述不够清楚*/

指令是

myApp.directive('myDir', function() {
var linkFn = function(scope, element, attrs) {

  alert('inside linkFn');
  $('button').on('click', function() { alert('button clicked');});
} 

  return {
    restrict: 'C', 
    link: linkFn
  }
});

使用ng-repeat该类my-dir可以放在ng-repeat的范围内,也可以放在它之外

案例1:my-dir超出了ng-repeat的范围

.my-dir
  .set(ng-repeat='button in buttons')
    button(id='id{{$index}}') {{item}}

现在上面的代码$('.set').on('click', function() { alert('button clicked');});没有被执行!

案例2:my-dir在ng-repeat中

(在控制器中) $scope.buttons=['4', '3', '2', '1'] …

我正在使用angularjs并且需要找到它的手表ng-repeat,因为我需要ng-repeat从特定点停止工作.我的代码:

<ul>
  <li ng-repeat="item in items">
      <div>{{item.name}}</div>
  </li>
</ul>

我需要找到的观察者ng-repeat.如果我去scope.$parent.$$watchers[x]并执行splice手表被删除,但我怎么能找到具体的手表？

我很困惑如何遍历这个数据模型.

$scope.object = [ {person1: {name: 'jon', height: 100}} , {person2: {name: 'joe', height: 200}}, {person3: {name: 'lisa', height: 150}}]

我正在尝试像这样重复

<tr ng-repeat = "person in object[0]">
    <td>{{person.name}}</td>
</tr>

这当然只会显示'jon'.我怎样才能得到所有人(x).name？我可以将它们命名为all1而不是person1,person2,但我的项目的数据模型不允许这样.能做什么？

谢谢

对于有多个无线电输入的人(是/否),我的ng-repeat问题很小.由于name ="person.name",输入名称应该不同,但它们的行为类似于它们都相同.有人知道如何解决这个问题？

http://jsfiddle.net/Chotkos/EbU8g/

HTML:

<form name="myForm" ng-controller="MyCtrl">
    <p>Decisions</p>
    <ul>
        <li ng-repeat="person in people">
            <label>{{person.name}}
                <input type="radio" ng-model="person.decision" name="person.name" value="Yes" />
                <input type="radio" ng-model="person.decision" name="person.name" value="No" />
            </label>
        </li>
    </ul>
</form>

JS:

function MyCtrl($scope) {
    $scope.people = [{
        name: "John"
    }, {
        name: "Paul"
    }, {
        name: "George"
    }, {
        name: "Ringo"
    }];
}

例如,我有一张桌子,其中我向学生展示数学,科学,英语和其他科目的标记.我有一个checkbox,如果检查只会列出有学生 {{student.mathMarks + student.scienceMarks > 150}}(即学生的数学和科学标记的总和超过150).当checkbox未经检查时,它将再次显示所有学生.有没有办法将条件过滤器与给定学生联系ng-repeat起来实现这一目标？

以下是与我上面尝试解释的案例有关的代码:

<tr ng-repeat="student in students">
    <td >
        {{student.name}}
    </td>
    <td >
       {{student.mathMarks}}
    </td>
    <td >
       {{student.scienceMarks}}
    </td>
     <td >
       {{student.englishMarks}}
    </td>
</tr>

<input type="checkbox" ng-model="onlyFooStudents" />

我不能$compile手动上班ng-repeat.这里有一个类似的问题:由$ compile编译的ngRepeat不起作用,但它没有解决这里的问题,因为我手动调用$digest范围但它仍然无效.

我指的代码在这里:

js:

angular.module('myApp', []);

angular.module('myApp').directive('test', ['$compile', '$rootScope', '$timeout', 
    function ($compile, $rootScope, $timeout) {
        var myScope = $rootScope.$new();
        myScope.numbers = [1, 2, 3];

        var html = '<div ng-repeat="number in numbers">{{ number }}</div>';
        var html2 = '<div>{{ numbers }}</div>';

        var returnObject = $compile(html)(myScope);
        $timeout(function () {
            myScope.$digest();
            console.log(returnObject);
        });

        return {};
    }
]);

HTML:

<html ng-app="myApp">

    <head>
    ...
    </head>

    <body>
        <h1 test>Hello Plunker!</h1>
    </body>

</html>

链接到plunker:http://plnkr.co/edit/RC1EILu16GPr0MGmSpcb？p …