标签: angularjs-ng-repeat

我正在使用AngularJS,我希望得到的效果类似于它会产生的效果,假设它可以工作(它没有).

视图

<tr ng-repeat='person in people' ng-class='rowClass(person)'>
  <td>.....info about person...</td>
  <td>.....info about person...</td>
  <td>.....info about person...</td>
</tr>

调节器

$scope.rowClass = function(person){
  ...return some value based upon some property of person...
}

我知道这个代码将无法工作,因为person是不可用的ng-class,因为这将只提供给每一行中的对象.代码是为了了解我正在尝试做的事情:即.我希望能够创建使用ng-repeat其类也基于条件的表行,该条件依赖于对行本身的作用域特征的访问,例如.person.我意识到我可以在列上添加ng-class,但这很无聊.有没有更好的想法？

我有一个对象数组,我正在使用它ng-repeat来迭代它们,这很容易.该数组看起来像这样:

$scope.steps = [
    {companyName: true},
    {businessType: true},
    {physicalAddress: true}
];

我的ng-repeat属性看起来像:

<div ng-repeat="step in steps"> ... </div>

在每次迭代中,step等于其中一个对象,如预期的那样.无论如何都要访问step对象的键和值？所以我可以这样做:

<div ng-repeat="(stepName, isComplete) in steps"> ... </div>

其中stepName== 'companyName'和isComplete== true.我已经尝试过做这件事,但stepName总是最终成为步骤对象的索引(这是有道理的).我只想弄清楚是否有另一种方法来编写ng-repeat语法,以便我可以获得密钥和值.

感谢您的任何想法/建议.非常感激.

PS.我目前的工作是在我的控制器中执行此操作:

$scope.stepNames = [];
angular.forEach($scope.steps, function(isComplete, stepName){
     $scope.stepNames.push({stepName: stepName, isComplete: isComplete});
});

然后迭代它,但在视图中完成所有操作会很好

是否可以过滤对象数组,以便属性值可以是几个值(OR条件),而无需编写自定义过滤器

这类似于这个问题 - Angular.js ng-repeat:按单个字段过滤

而不是

<div ng-repeat="product in products | filter: { color: 'red' }">

有可能做这样的事情

<div ng-repeat="product in products | filter: { color: 'red'||'blue' }">

如下样本数据─

$scope.products = [
   { id: 1, name: 'test', color: 'red' },
   { id: 2, name: 'bob', color: 'blue' }
   /*... etc... */
];

我没试过

<div ng-repeat="product in products | filter: { color: ('red'||'blue') }">

我正在使用ng-repeat并在angularJS中过滤,就像手机教程一样,但我想在页面中突出显示搜索结果.使用基本的jQuery,我只需要在输入上的键上解析页面,但我正在尝试以角度方式进行.有任何想法吗 ？

我的代码:

<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>

我找不到能帮助我解决Angular中这个简单问题的东西.当对位置路径进行比较时,所有答案都与导航栏相关.

我已经使用list和构建了一个动态表ngRepeat.当我单击一行时,我正在尝试为此行分配一个选定的css类,以突出显示用户已选择此行的事实,并.selected从之前突出显示的行中删除该行.

我错过了在所选行和css类赋值之间绑定的方法.

我应用于每个row(ul)ng-click="setSelected()" 但我错过了function应用更改内部的逻辑.

我的代码 - 普拉克

我的代码:

var webApp = angular.module('webApp', []);

//controllers
webApp.controller ('VotesCtrl', function ($scope, Votes) {
    $scope.votes  = Votes;
    $scope.statuses = ["Approved","Pending","Trash","Spam"];

    $scope.setSelected = function() {
       console.log("show");

    }
});

//services
webApp.factory('Votes', [function() {

    //temporary repository till integration with DB this will be translated into restful get query
    var votes = [
        {
            id: '1',
            created: 1381583344653,
            updated: '222212',
            ratingID: '3',
            rate: 5,
            ip: '198.168.0.0', …

我如何隐藏ng-repeat的第一个元素？

<div ng-repeat="item in items" ng-hide="true">
    <div>{{ item.value }}</div>
</div>

这样可以隐藏整个ng-repeat块,但是如何只隐藏项目中的第一项？我希望使用更突出的html/etc以完全不同的方式显示它,因此将它放在该数据列表中是有用的.

我正在尝试使用条件将项目分组为ng-repeat.

一个示例条件是使用相同的小时对所有元素进行分组.

数据:

[
    {name: 'AAA', time: '12:05'},
    {name: 'BBB', time: '12:10'},
    {name: 'CCC', time: '13:20'},
    {name: 'DDD', time: '13:30'},
    {name: 'EEE', time: '13:40'},
    ...
]

'time'字段实际上是一个时间戳(1399372207),但是确切的时间示例输出更容易理解.

我使用ng-repeat列出这些项目:

<div ng-repeat="r in data| orderBy:sort:direction">
   <p>{{r.name}}</p>
</div>

还尝试过:

<div ng-repeat-start="r in data| orderBy:sort:direction"></div>
    <p>{{r.name}}</p>
<div ng-repeat-end></div>

有效输出是:

<div class="group-class">
    <div><p>AAA</p></div>
    <div><p>BBB</p></div>
</div>
<div class="group-class">
    <div><p>CCC</p></div>
    <div><p>DDD</p></div>
    <div><p>EEE</p></div>
</div>

如果我的问题没有简单的解决方案,我的最后一个选择是对数据进行分组,然后将其分配给ng-repeat中使用的范围变量.

有什么想法吗？

目前,我的应用程序有一个控制器,它接收一个JSON文件,然后使用"ng-repeat"迭代它们.这一切都很好,但我也有一个需要迭代相同JSON文件的指令.这是一个问题,因为我不能在一个页面上两次请求相同的JSON文件(我也不想,因为它效率低).如果我更改其中一个JSON文件的文件名,指令和控制器请求并迭代JSON数据就好了.

我想知道的是:将控制器的JSON请求形成的数组传递给指令的最佳方法是什么？当我已经通过我的控制器访问它时,如何将数组传递给我的指令并进行迭代？

调节器

appControllers.controller('dummyCtrl', function ($scope, $http) {
   $http.get('locations/locations.json').success(function(data) {
      $scope.locations = data;
   });
});

HTML

<ul class="list">
   <li ng-repeat="location in locations">
      <a href="#">{{location.id}}. {{location.name}}</a>
   </li>
</ul>
<map></map> //executes a js library

指令(当我使用除locations.json之外的文件名时工作,因为我已经请求过一次

.directive('map', function($http) {
   return {
     restrict: 'E',
     replace: true,
     template: '<div></div>',
     link: function(scope, element, attrs) {

$http.get('locations/locations.json').success(function(data) {
   angular.forEach(data.locations, function(location, key){
     //do something
   });
});

如果我有一个带有对象作为属性值的复杂对象,如何通过其中一个嵌套属性进行过滤？

可以使用OOB ng-repeat过滤器完成吗？

数据

{
  Name: 'John Smith',
  Manager: {
     id: 123,
     Name: 'Bill Lumburg'
  }
}

ngRepeat

<li ng-repeat="e in emps | filter:Manager.Name">{{ e.Name }}</li>

我是Angular JS的新手,我正在尝试创建一个将使用如下的自定义指令:

<div linkedlist listcolumns="{{cashAccountsColumns}}"></div>

Corrps.控制器将是:

$scope.cashAccountsColumns = [
  {"field": "description", "title": "Description"},
  {"field": "owner", "title":"Owner"},
  {"field": "currentBalance", "title":"Current Balance" }
];

和指令代码是:

return {
      restrict : 'EA',
      transclude : false,
      templateUrl : 'html/linkedlist.html',
      scope: {
         listcolumns: "@"
      },
      link : function(scope, element, attrs) {
      }
}

模板是:

<table class="box-table" width="100%">
  <thead>
    <tr>
      <th scope="col" ng-repeat="column in listcolumns">
        {{column.title}}
      </th>
    </tr>
  </thead>
</table>

但这不起作用.我没有在屏幕上获得column.title的值,而是将以下太多行添加到DOM:

<th ng-repeat="column in listcolumns" scope="col" class="ng-scope ng-binding"></th>