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>

我在這裏錯過了什麼？

來源

2014-09-20 Nitin Varpe

除了你原來的問題，你的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響應數據，所以我們知道結果會是什麼）}

來源

2014-09-20 10:30:34 Endless

ng-change沒有更新視圖AngularJS

回答

相關問題