Question

我正在使用AngularJS并尝试使用。

加载产品

$scope.update=function(){
    $scope.loading = true;
    $scope.brandString=$scope.brands.join(':');
    UpdateService.getProducts($scope).then(function (data) { $scope.loading = false; $scope.products = data.Products;}, function () {              
    });
};

$scope.changepage=function(pagenum){
    $scope.pagenumber=pagenum;
    $scope.update();
};
$scope.changeorderby=function(orderby){
    $scope.orderby=orderby;
    $scope.pagenumber=1;
    $scope.update();
}; 

$scope.updatebrands=function(id){
    var index = $scope.brands.indexOf(id);
    // Add if checked
    if ($('#'+id).is(':checked')) {
        if (index === -1) $scope.brands.push(id);
    }
    // Remove if unchecked
    else {
        if (index !== -1) $scope.brands.splice(index, 1);
    }
    $scope.update();
};

我的第2和第3个功能即changepage和changeorderby正常运行并且也在更新视图。复选框更改时调用的第4个函数也会从服务器返回正确的数据，但不会更新我的视图。

代码复选框。

<div class="listbox">
    <ul>
        <div ng-class="{active : item.Checked, inactive:!item.Checked}" ng-repeat="item in brandDetails" style="padding:1px 0">
            <div ng-class="{divchecked : item.Checked, divunchecked:!item.Checked}">
                <input type="checkbox" id="{{item.Id}}" ng-change="updatebrands(item.Id)" ng-model="item.Checked" name="{{item.Name}}" value="{{item.Id}}" style="opacity:0" class="brandName ng-pristine ng-valid" /></input>
            </div>
            <span style="margin-left: 8px; font-size: 11px;top: -1px;position: relative;">{{item.Name}}</span>
        </div>
    </ul>
</div>

我在这里缺少什么？

Answer 1

如果UpdateService.getProducts()没有使用原始角度$ http服务，那么angular就不会知道发生了什么，所以你需要调用$scope.$apply()

$scope.update = function(){
  $scope.loading = true;
  $scope.brandString = $scope.brands.join(':');
  UpdateService.getProducts($scope).then(function (data) { 
    $scope.loading = false;
    $scope.products = data.Products;

    // Only if UpdateService.getProducts isn't pure $http or $q service
    $scope.$apply(); 
  }, function () {
    // error
  });
};

$scope.changepage = function(pagenum){
  $scope.pagenumber = pagenum;
  $scope.update();
};

$scope.changeorderby = function(orderby){
  $scope.orderby = orderby;
  $scope.pagenumber = 1;
  $scope.update();
};


$scope.updatebrands = function(item){
  var index = $scope.brands.indexOf(item.id);
  // Add if checked
  if (item.Checked) {
    if (index === -1) $scope.brands.push(item.id);
  }
  // Remove if unchecked
  else {
    if (index !== -1) $scope.brands.splice(index, 1);
  }
  $scope.update();
};

<div class="listbox">
  <ul>
    <li>
      <div ng-class="{active : item.Checked, inactive: !item.Checked}" ng-repeat="item in brandDetails" style="padding: 1px 0">
        <div ng-class="{divchecked : item.Checked, divunchecked: !item.Checked}">
          <input type="checkbox" id="{{item.Id}}" ng-change="updatebrands(item)" ng-model="item.Checked" name="{{item.Name}}" style="opacity: 0" class="brandName ng-pristine ng-valid" />
        </div>
        <span style="margin-left: 8px; font-size: 11px; top: -1px;position: relative;">{{item.Name}}</span>
      </div>
    </li>
  </ul>
</div>

_{（顺便说一句，你的代码仍有几个问题。）}

_{（提供一个小示例代码plunkr或jsfiddle来帮助我们，模拟您的xhr响应数据，以便我们知道结果是什么）}

ng-change不会更新视图AngularJS

1 个答案: