ng-change事件第一次不起作用，选择了切换按钮以取消选择

Dinesh Vaitage 发表于 Dev

迪尼什·瓦蒂奇

我已经使用切换按钮来选择多个记录。第一次单击切换按钮以取消选中时，我已经显示了已选择的现有记录，在这种情况下ng-change事件不起作用。第二次单击相同的切换按钮进行选择，ng-change正常工作...

var unitsLists = [{Id:1, UnitType:'Kg'}...];
var selectedUnits = [1,2,...]; //existing unit ids array

请建议我解决此问题...

<ion-list>
<ion-toggle ng-repeat="item in unitsLists" ng-checked="selectedUnits.indexOf(item.Id) != -1" ng-true-value="{{item.Id}}" ng-false-value="false" ng-model="UnitListModel[item.Id+item.UnitType]" ng-change="setToggleValue(UnitListModel[item.Id+item.UnitType], item.Id);" toggle-class="toggle-balanced">
                <h2>{{item.UnitType}}</h2>
            </ion-toggle>
            <a ng-hide="unitsLists.length > 0" class="item item-icon-right clsCenter">Record not found.</a>
        </ion-list>

the_mahasagar

好吧，我已经从您的代码及其工作方式中进行了很多更改！但是希望这对您有所帮助。

在控制器中：

 $scope.unitsLists = [{Id:1, UnitType:'unit1'},
  {Id:2, UnitType:'unit2'},
  {Id:3, UnitType:'unit3'},
  {Id:4, UnitType:'unit4'},
  {Id:5, UnitType:'unit5'}];

$scope.selectedUnits = [1,3]; //existing unit ids array

$scope.UnitListModel = {};
angular.forEach($scope.selectedUnits, function(value, key) {
  $scope.UnitListModel[value] = 'true';
});
$scope.setToggleValue = function (id) {
  var index = $scope.selectedUnits.indexOf(id);
  if ( index === -1) {
    $scope.selectedUnits.push(id);
    $scope.UnitListModel[id] = 'true';
  } else if (index != -1) {
    $scope.selectedUnits.splice(index, 1);
    $scope.UnitListModel[id] = 'false';
  }
  console.log("$scope.selectedUnits :"+JSON.stringify($scope.selectedUnits));
  console.log("$scope.UnitListModel :"+JSON.stringify($scope.UnitListModel));
}

html：

<ion-toggle ng-repeat="item in unitsLists"
                ng-checked="selectedUnits.indexOf(item.Id) != -1"
                ng-model="UnitListModel[item.Id]"
                ng-click="setToggleValue(item.Id);"
                toggle-class="toggle-balanced">
     <h2>{{item.UnitType}}</h2>
</ion-toggle>

你可以添加 ng-true-value="{{item.Id}}" ng-false-value="false"

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。