标签: angularjs-ng-repeat

在数据加载完成之前,如何让AngularJS显示加载微调器？

如果我的控制器已$scope.items = [{name: "One"}]静态设置,并且填充了一个AJAX加载器$scope.items[0]['lateLoader'] = "Hello",我希望微调器显示直到AJAX加载完成,然后用检索到的数据填充绑定范围.

<ul ng-repeat="item in items">
  <li>
    <p>Always present: {{item.name}}</p>
    <p>Loads later: <span ng-bind="item.lateLoader"><i class="icon icon-refresh icon-spin"></i></span></p>
  </li>
</ul>

此代码立即填充绑定范围,并且由于item.lateLoader空,所以微调器将替换为空.

我该怎么干净呢？

当您向下滚动页面时,如何实现渐进式内容加载？否则将同时加载1000张图像.

我正在使用以下代码显示缩略图列表:

<div class ="channel" ng-repeat ="channel in UIModel.channels" ng-class ="{evenchannel: ($index % 2) == 0, oddchannel: ($index % 2) == 1}">
            <img class="channel-img" ng-src ="data/channels/{{$index + 1}}/thumb"/>
</div>

在控制器中,我有一个ajax请求,它抓取新的缩略图图像.Angular因此更新图像但导致闪烁.有没有办法在更新DOM的过程中双重缓冲区或没有删除列表？

我正在尝试通过键入一系列日期来过滤包含时间戳的列表

例如:

的jsfiddle

HTML

<div ng-app="tst">
    <div ng-controller="MyController">
        <table>
            <tr>
                <td>From:
                    <input ng-model="query.date1" type="text" placeholder="" />
                </td>
                <td>To:
                    <input ng-model="query.date2" type="text" placeholder="" />
                </td>
            </tr>

            <tr ng-repeat="order in orders |filter:query">
                <td>{{order.date1 * 1000 | date:'dd-MM-yyyy'}}</td>
                <td>{{order.date2 * 1000 | date:'dd-MM-yyyy'}}</td>
            </tr>
        </table>
    </div>
</div>

JavaScript的

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

nameSpace.controller('MyController', function MyController($scope) {
  $scope.orders = [
  {
    "date1":"1306487800",
    "date2":"1406587800"
  },
  {
    "date1":"1196487800",
    "date2":"1406597800"
  }]
});

我希望能够使用以下值填充"发件人"字段:27-05-2010

和"To"字段的值:29-07-2015

并只获取​​此范围内的记录.

(示例中的第一条记录).

谢谢分享Avi

我正在尝试计算转发器中的元素并将其打印到控制台.

这是标记:

<div class="col-md-3 ng-scope" ng-repeat="app in userApps" >...< /div> 

目前我正在计算和比较:

expect(element.all(by.repeater('app in userApps')).count()).toEqual(4);

它有效,但我也希望能够打印它.

我试过这个:

var rows = element.all(by.repeater("app in userApps"));
var sum = rows.count(); 
console.log(sum.getText());

但我得到了:

TypeError: Object [object Object] has no method 'getText'

实际上有两个问题 - 我是以正确的方式做到的吗？2.如何将其打印到控制台？

尝试使用带有ng-show语句的指令.基本上它会检查字符串的值,这是我的'names'jsonarray中的status_p1属性:

ng-show="name.status_p1==working"

该指令定义如下:

app.directive('radioButton',function(){
  return {
    restrict: 'E',

    replace: 'true',

    template: '<table border="2px">' +
    '<tr><td>{{name.name}}</td><td>Working</td><td><img src="http://www.iconshock.com/img_jpg/REALVISTA/general/jpg/256/cross_icon.jpg" alt="img1" id="imgworking" ng-show="name.status_p1!=working"><img src="http://png-1.findicons.com/files/icons/2198/dark_glass/128/camera_test.png" alt="img2" ng-show="name.status_p1==working"></td></tr>' +
    '</table>'
  };
})

我的主页面中的控制器+ namesarray如下所示:

 app.controller('MainCtrl', function($scope) {
 $scope.names = [
    {
      name: 'couple 1',
      status_p1: 'working',
      status_p2: 'retired'
    }

  ]
});

最后是主页:

<body ng-controller="MainCtrl">
    <div ng-repeat="name in names">
      <radio-button></radio-button>
    </div>
</body>

当前显示一个十字架,它应显示一个检查/勾选.我期望条件评估为TRUE,因为status_p1属性等于'working'.如何修改此ng-showstatement以使字符串比较有效？plunkr链接:http://plnkr.co/edit/3VdsbsSHpkNJFVnvkmOW？p = preview

我有一个html选择选项

<select>
    <option ng-repeat="field in filter.fields" value="{{field.id}}">{{field.name}}</option>
</select>

我正在从ng-repeat迭代,我想基于一个可选择的字段来禁用选项

<select>
    <option ng-repeat="field in filter.fields" {field.selectable==true?enable:disable} value="{{field.id}}">{{field.name}}</option>
 </select>

我怎么能用角度实现这个目标？

我想在过滤器上没有返回任何项目时显示一个div(消息)(ng-repeat).

根据选择框(ng-model)进行过滤.并且某些选项没有结果,那时用户应该能够在同一个地方阅读消息.我可以在这里使用ng-show/hide吗？怎么样？

谢谢,

这是我第一个使用Angular的项目,我在ng-animate方面遇到了一些麻烦.我做了几个教程,在教程中我得到了一切正常.现在我正在使用Angular进行项目,而我无法让ng-animate正常工作.诸如"ng-enter"和"ng-leave"之类的类不会添加到不同的元素中.

我已经将各种工作脚本与我进行了比较,但却无法找出我做错了什么.

我的标题:

<link rel="stylesheet" href="css/app.css">

<script src="js/libraries/jquery-2.1.1.min.js"></script>
<script src="js/libraries/angular.js"></script>
<script src="js/libraries/angular-animate.js"></script>
<script src="js/libraries/angular-resource.js"></script>
<script src="js/libraries/angular-route.js"></script>

<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>

我的HTML:

<div class="view-container">
<div ng-view class="{{pageclass}} view-frame"></div>
</div>

我的app.js.

'use strict';

/* App Module */

var engineShowcaseApp = angular.module('engineShowcaseApp', [
  'ngRoute',
  'ngAnimate',
  'engineShowcaseController',
  'engineShowcaseServices'
]);

engineShowcaseApp.config(['$routeProvider',
  function ($routeProvider) {
    $routeProvider.
      when('/', {
        templateUrl: 'partials/main.html',
        controller: 'MainCtrl'
      }).
      when('/chapters/:chapterID', {
        templateUrl: 'partials/chapter.html',
        controller: 'ChapterCtrl'
      });
  } ]);

我的controllers.js:

'use strict';

/* Controllers */

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

engineShowcaseController.controller('MainCtrl', …

我正在重复一个对象数组,我希望循环中的变量只能引用每个对象的一个​​属性.

简化数据示例:

var data = [
  {
    'name': {
      'first': 'John',
      'last': 'Johnson'
    }
    'age': 45
  },
  {
    'name': {
      'first': 'Larry',
      'last': 'Wilson'
    }
    'age': 45
  }
]

我可以:

<div ng-repeat="person in data">{{ person.name.first }}</div>

但我更喜欢做的只是专注于我正在使用的对象的唯一部分,并执行以下操作:

<div ng-repeat="person.name in data as name">{{ name.first }}</div>

但这似乎不起作用 - 这目前可能吗？