5

我是 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">

正常吗？

4

2 回答 2

4

尝试添加标志，或在 jsfiddle链接上尝试。

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);
        }
    });
}
于 2013-07-25T00:34:10.410 回答
2
  1. 没有办法避免第一次调用；你必须使用一个标志来跳过那个。
  2. 总会有第二个电话。那是orders填充的时候。为避免这种情况，您可以检查是否oldVal为空数组。
  3. 我认为你应该看selected房子；不是订单的所有属性。
  4. 手表应该比较值，而不是实例；因此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 。在您实际检查项目之前，控制台不会记录任何内容。

于 2013-07-25T01:37:36.227 回答