标签: angularjs-ng-repeat

假设我收到一个包含15个以上对象的对象文字,我需要在一个漂亮的布局中显示它们(并非所有的连续),控制何时应该断行/页面应该结束的最有效的方法是什么？

现在我在表行上使用ng-repeat,结果是一个带有一列的长薄表.

编辑以澄清.可以在对象/更多参数中包含对象.这是我的对象:

$scope.zones = [
        {"name": "Zone 1",
         "activity": "1"},
        {"name": "Zone 2",
         "activity": "1"},
        {"name": "Zone 3",
         "activity": "0"},
        {"name": "Zone 4",
         "activity": "0"},
        {"name": "Zone 5",
         "activity": "0"},
        {"name": "Zone 6",
         "activity": "0"},
        {"name": "Zone 7",
         "activity": "1"},
        {"name": "Zone 8",
         "activity": "0"},
        {"name": "Zone 9",
         "activity": "0"},
        {"name": "Zone 10",
         "activity": "0"},
        {"name": "Zone 11",
         "activity": "1"},
        {"name": "Zone 12",
         "activity": "1"},
        {"name": "Zone 13",
         "activity": "0"},
        {"name": "Zone 14",
         "activity": "0"},
        {"name": "Zone 15",
         "activity": …

我有一个简单的<input>搜索过滤器设置为项目名称列表AngularJS.

我的列表看起来像这样:

var uniqueLists = {
    category1: ['item1', 'item2', 'item3' ... 'item180' ], // Real list contains ~180 items
    category2: ['itemA', 'itemB', 'itemC' ... 'itemZZZ' ], // Real list contains ~1080 items
    category3: ['otheritem1', 'otheritem2', 'otheritem3' ]  // Real list contains 6 items
  }

我在Angular中遍历此列表并在<ul>每个类别中打印出结果.

<div ng-repeat="(key,val) in uniqueLists">
    <form ng-model="uniqueLists[index][0]">
        <input ng-model="searchFilter" type="text" />
            <ul>
                <li ng-repeat="value in val | filter: searchFilter">
                    <label>
                         <input type="checkbox" ng-model="selectedData[key][value]" />
                        {{value}}
                    </label>
                </li>
            </ul>
    </form>
</div> …

我有一个列表列表,使用嵌套的ng-repeat创建.每个外部ng-repeat包含一个带有内部列表标签的div(例如:"A组").我现在正试图创建一种方法来避免显示此标签,如果内部列表由于过滤而为空(由输入搜索文本应用)

这是一个解释我的问题和我尝试的解决方案的plunker:Plnkr

拥有像isGroupEmpty这样的'重'功能似乎非常麻烦 - 有没有办法以更简单的方式做到这一点？我正在玩弄内部ng-repeat内部标签的想法,ng-show="$first"但它看起来并不好看

我有一个存储的词典 field_detail

<li ng-repeat = "field in field_detail">{{field.displayName}}</li>

现在我不想包括重复displayName的field_detail,什么filter应该怎么用？

我正在尝试使用AngularJS作为我的第一个项目(锦标赛经理)并且orderBy过滤器ng-repeat不起作用:(我已阅读有关该文档的所有文档,但无所事事:/

所以,我有$scope类似的定义:

$scope.order_item = "count_win";
$scope.order_reverse = false;
$scope.teams = {
  100 : {
    id: 100,
    name: "XXX",
    count_win: 1,
    count_loose: 2,
    goal_average: 1,
  },
  200 : {
    id: 200,
    name: "XXX",
    count_win: 1,
    count_loose: 2,
    goal_average: 1,
  },
  [...]
};

现在,根据我的观点,我正在尝试重新排序(首先只有一个订单项)但从未工作......

<tr ng-repeat="team in teams | orderBy:order_item:order_reverse">
   <td>{{team.name}}</td>
   <td>{{team.count_loose}}</td>
   <td>{{team.goal_average}}</td>
</tr>

第二次,我想从2条信息来重新排序:count_win和goal_average如果第一是平等的.我尝试更换$scope.order_item这样的,但如果一个代码没有工作,他绝不会与2工作...

$scope.order_item = ['count_win','goal_average'];

谢谢大家的阅读和对不起的帖子大小.

我有一个像这样的小角度应用程序:

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"},
  ]
}

产量

simon, 1
archie, 14
jumbo1, 3

我想要做的是仅在id字段上过滤过滤器参数AND过滤器的完全匹配.

基本上,我希望输出为:

产量

simon, 1

我正在使用Angular 1.2.

我有一个从JSON文件中检索数据的服务.

数据中的一些数据全部为大写,例如:

$scope.FootballClubs = [{
    CompanyName: [MANCHESTER UNITED, LIVERPOOL FOOTBALL CLUB, CHELSEA, WIGAN UNTIED, LEICESTER CITY]
}];

在我的HTML中,我只是抛出上述内容:

<div ng-repeat="name in FootballClubs">
    {{ name.CompanyName }}
</div>

抛出:

MANCHESTER UNITED
LIVERPOOL FOOTBALL CLUB
CHELSEA
WIGAN UNTIED
LEICESTER CITY

我想要展示的是:

Manchester United
Liverpool Football Club
Chelsea
Wigan United
Leicester City

我有一个简单的ng-repeat抛出数据,它显示的字段之一是NumberOfStamps:

<tr ng-repeat-start="list in Data.Items ">
   <td><a href=" {[{list.Title}]} {[{list.ForeName}]} {[{list.SurName}]}</a></td>
   <td>(Date of Birth {[{list.Dob}]})</td>
   <td>{[{list.NumberOfStamps}]}  stamps</td>
</tr>

示例输出:

Mr Adam Happy  Date of Birth 01/6/1984     16 stamps
Mr Adam Sad    Date of Birth 24/11/1975    0 stamps
Mr Adam Green  Date of Birth 02/1/1963     1 stamps
Mr Adam Red    Date of Birth 21/1/1951     12 stamps
Mr Adam Blue   Date of Birth 28/10/1998    0 stamps
Mr Adam Brown  Date of Birth 25/9/2010     0 stamps
Mr Adam Black  Date of Birth 24/8/1954 …

我在表行上使用ng-repeat,其中包含从服务器检索的JSON数组中的数据.我的目标是在服务器上添加,删除或修改项目时自动更新列表,而不会影响未修改的项目.在最终实现中,这些表行还将包含双向绑定<input>和<select>元素,以将更新发送回服务器.<select>元素中的一些可用选项也将使用来自另一个列表的ng-repeat指令生成,这些指令也可能会更改.

到目前为止,每当新阵列来自服务器(当前每两秒轮询一次)时,整个ng-repeat列表将被删除并重新生成.这是有问题的,因为它干扰文本选择,即使用户当前正在编辑它们也会破坏输入字段,并且可能比必要的运行速度慢很多.

我已经编写了其他使用jQuery和DOM操作执行我想要的Web应用程序,但代码最终变得非常毛茸茸并且开发非常耗时.我希望使用AngularJS和数据绑定来完成这个代码和时间的一小部分.

所以这里有一个问题:是否可以通过这种方式更新支持数组,但只修改与实际更改的项目/属性相对应的DOM元素？

这是一个最小的测试用例,它使用计时器中的硬编码数组模拟周期性轮询(请参见http://jsfiddle.net/DWrmP/).请注意,由于要删除并重新创建元素,因此每500毫秒清除一次文本选择.

HTML

<body ng-app="myApp">
    <table ng-controller="MyController">
        <tr ng-repeat="item in items | orderBy:'id'">
            <td>{{item.id}}</td>
            <td>{{item.data}}</td>
        </tr>
    </table>
</body>

JavaScript的

angular.module('myApp', []).controller(
    'MyController', [
        '$scope', '$timeout',
        function($scope, $timeout) {
            $scope.items = [
                { id: 0, data: 'Zero' }
            ];

            function setData() {
                $scope.items = [
                    { id: 1, data: 'One' },
                    { id: 2, data: 'Two' },
                    { id: 5, data: 'Five' },
                    { id: 4, data: 'Four' }, …

我正在尝试使用生成可编辑列表ng-repeat.我想提醒用户在继续之前更新任何编辑,因此我正在使用动态ng-form创建"嵌套"表单,因为文档说我可以对这些动态创建的输入使用验证.

虽然这似乎在HTML中工作,但我没有看到如何在控制器中访问那些动态创建的表单和相关的验证字段.具体来说,当用户更改输入时,我使用表单$ dirty属性调出一个按钮来告诉用户提交更改.到现在为止还挺好.但是,一旦提交了更改,我希望$setPristine()在该字段上指示已设置更改.在我允许提交主表单之前,可能还有其他方法可以确保在每个输入上提交更改,但这是我能想到的最好的方法.

不幸的是,即使文档说如果我将ng-form命名为它将传播到$scope对象,我找不到访问它的方法. $scope.dynamic_form未定义.

这是一个显示我的意思的plunker:

plnk

谢谢!

[编辑]只是为了添加问题,这个特定示例的工作原理是添加到ng-click动态创建的输入上:

ng-click="namesForm.name.$setPristine();clean()"

但我仍然无法访问控制器中动态创建的表单.例如,我希望添加一个观察程序,namesForm.name.$pristine以便我可以设置mainForm.$setValidity(false)子表单,$dirty以防止用户提交主表单,直到所有子表单更改都已提交.

简而言之,问题是如何在父控制器中访问动态创建的嵌套ngForm的验证值？