Question

我是AngularJS的新手。尝试创建第一个应用程序，并有问题。有复选框列表

<div class='order-box row-fluid' ng-repeat="order in orders" ng-model="orders">
   <input type="checkbox" value="{{ order.id }}" ng-model="order.selected">
<div>

订单是通过加载页面上的ajax查询从服务器填充的。

function OrdersCtrl($scope, Order){
    $scope.orders = Order.query();
    $scope.$watch('orders', function(v){
        if (!v) return;
        alert(v);
    }, true);
}

主要目标是按所选复选框计算成本。

但是在加载页面上我看到警报，如何在加载内容后才开始观看？

第二个问题：在div上进行ng-repeat。所有重复的div都像

<div class="order-box row-fluid ng-scope ng-pristine ng-valid" ng-repeat="order in orders" ng-model="orders">

这是正常的吗？

Answer 1

尝试添加标记，或在jsfiddle link上尝试。

function OrdersCtrl($scope, $timeout) {
    $scope.orders = [];
    var first = true; //this doesn't belong to any scope, it will be deallocated after the current cycle.

    var ajax = function () {
        $scope.orders = [{
            id: 1,
            selected: true
        }, {
            id: 2,
            selected: true
        }, {
            id: 3,
            selected: true
        }, {
            id: 4,
            selected: true
        }];
    };

    $scope.$watch('orders', function (n, o) {
        if (first) {
            $timeout(ajax, 2000); //simulate the ajax call. Assume data comes back in 2 seconds.
        } else {
            alert(n);
        }
    });
}

Answer 2

没有办法避开第一个电话;你必须使用一个标志来跳过那个。
总会有第二个电话。那就是填充orders的时候。为避免这种情况，您可以检查oldVal是否为空数组。
我认为你应该看selected财产;不是订单的所有属性。
手表应该比较价值，而不是实例;因此true

$watch

以下是具有自定义watch功能的代码：

// watch only order.selected
var watch = function(o) {
  var mapped = _.map(o.orders, function(o){
    return o.selected || false;
  });
  return mapped; 
};

var firstWatch = true;
$scope.$watch(watch, function(newVal, oldVal) {
  if ( firstWatch || oldVal.length === 0 ) {
      firstWatch = false;
      return;
  }
  console.log('changed', newVal, oldVal);
}, true);

请参阅此示例：http://plnkr.co/edit/q29mXXcdHRYHG9frvfNC?p=preview。在您实际检查项目之前，没有任何内容记录到控制台。

AngularJS在加载内容后开始观看

2 个答案: