ng-change没有更新视图AngularJS

问题描述：

我正在使用AngularJS并尝试使用加载产品。ng-change没有更新视图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(); 
};

我的第二和第三个函数，即changepage和changeorderby工作正常和更新视图中。在复选框更改时调用的第四个函数也会从服务器返回适当的数据，但不会更新我的视图。

代码复选框。

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

我在这里错过了什么？

除了你原来的问题，你的HTML标记在几个地方f.e. 'div'不允许是'ul'的直接子元素或''是一个自闭元素，它没有结束标记。你的内联样式也有错误，'span'需要'display'属性设置为'block'或'inline-block'，以便相应地显示边距。 – 2014-09-20 09:56:22

也不使用value =“{{item.Id}}”ng-model注意 – Endless 2014-09-20 10:05:31

也不应该以id /“{{item.Id} }“） – Endless 2014-09-20 10:41:52

答

如果UpdateService.getProducts()这么想的使用原始的角$ http服务，然后将角不知道的东西有happend，所以你需要调用$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>

_{（BTW您的代码仍然有几个问题）。}

_{（提供一个小例子代码plunkr或jsfiddle帮助我们帮助你，嘲笑你的xhr响应数据，所以我们知道结果会是什么）}

ng-change没有更新视图AngularJS

相关推荐