Question

我有两组复选框，其中值设置为变量，以字符串形式保存到数据库。

如果我回到复选框页面并选中/取消选中它，我如何“更新”此变量？

我尝试使用ng-change但是每次检查点击都会重复第一次检查值，或者在取消选中点击时删除所有值，并在console.log上获取NaN

<form class="list">

    <ion-toggle toggle-class="toggle-balanced" ng-model="data.turnOnOff" ng-true-value="'On'" ng-false-value="'Off'" ng-change="data.openDatabases(data.turnOnOff)">Databases</ion-toggle>
    <div class="spacer" style="height: 10px;"></div>

    <ion-list ng-show="bd">
        <ion-checkbox ng-repeat="(key, value) in db" ng-model=value.checked ng-change="data.checkChanges()">{{ value.text }}</ion-checkbox>
    </ion-list>
    <div class="spacer" style="height: 10px;"></div>


    <ion-toggle toggle-class="toggle-balanced" ng-model="data.escritorio" ng-true-value="'On'" ng-false-value="'Off'" ng-change="data.openEscritorio(data.escritorio)">Office</ion-toggle>
    <div class="spacer" style="height: 10px;"></div>

    <ion-list ng-show="officee">
        <ion-checkbox ng-repeat="(key, value) in office" ng-model=value.checked ng-change="data.checkChanges()">{{ value.text }}</ion-checkbox>
    </ion-list>
</form>

CONTROLER

var checkedData = [];
var getResults = [];

$scope.data = {};

$scope.db = [
    {text:'Firebird', checked:'false'}, 
    {text:'MongoDB', checked:'false'}, 
    {text:'mSQL', checked:'false'}, 
    {text:'MySQL', checked:'false'}, 
    {text:'Oracle', checked:'false'}, 
    {text:'PostgreSQL', checked:'false'}, 
    {text:'TinySQL', checked:'false'}, 
    {text:'SQLite', checked:'false'}, 
    {text:'SQL Server', checked:'false'}, 
    {text:'Sybase', checked:'false'}, 
    {text:'Outros', checked:'false'}
]

$scope.office = [
    {text:'Microsoft Access', checked:'false'}, 
    {text:'Microsoft Excel', checked:'false'}, 
    {text:'Microsoft Outlook', checked:'false'}, 
    {text:'Microsoft PowerPoint', checked:'false'}, 
    {text:'Microsoft Word', checked:'false'}, 
    {text:'Open Office', checked:'false'}
]

$scope.data.checkChanges = function(){

    angular.forEach($scope.db, function(key, value){
        if(key.checked == true){
            //checkedData.push(key.text);

            checkedData += key.text + ', ';

        }else if(key.checked == false){

            checkedData -= key.text + ', ';

        }
    });

    angular.forEach($scope.office, function(key, value){
        if(key.checked == true){

            checkedData += key.text + ', ';

        }else if(key.checked == false){

            checkedData -= key.text + ', ';

        }
    });

    //checkedData = checkedData.substring(0, checkedData.length - 2);
    console.log("result: "+checkedData);

}

Answer 1

在输入中使用ng-change指令将允许您在$scope.db对象上运行某些操作。

基本上，当发生从true到false的更改（或相反）时，该函数将运行并确定新值是否为true。如果是，则会将push d变为名为$scope.filteredDatabases的新数组。

如果新值为false，则会从$scope.filteredDatabases中删除。

最后一点只是在join $scope.filteredDatabases上运行array操作，在这种情况下，使用逗号加入。

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $filter) {


 $scope.db = [
    {text:'Firebird', checked:'false'}, 
    {text:'MongoDB', checked:'false'}, 
    {text:'mSQL', checked:'false'}, 
    {text:'MySQL', checked:'false'}, 
    {text:'Oracle', checked:'false'}, 
    {text:'PostgreSQL', checked:'false'}, 
    {text:'TinySQL', checked:'false'}, 
    {text:'SQLite', checked:'false'}, 
    {text:'SQL Server', checked:'false'}, 
    {text:'Sybase', checked:'false'}, 
    {text:'Outros', checked:'false'}
 ];


  $scope.filteredDatabases = [];

  $scope.notifyChange = function(item) {
    if (!!item.checked){
       $scope.filteredDatabases.push(item.text);
    }
    else {
      var index = $scope.filteredDatabases.indexOf(item);
      $scope.filteredDatabases.splice(index, 1);
    }
    
     $scope.filteredString = $scope.filteredDatabases.join(',');
  };




});

label {
  display: block;
}

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">

  <form class="list">

    <label ng-repeat="option in db">
      <input type="checkbox" ng-model="option.checked" ng-change="notifyChange(option)"/> {{option.text}}

    </label>
  </form>
  <hr />
  <pre>{{filteredString}}</pre> 
</body>

</html>

Plunker镜子：http://plnkr.co/edit/NqFGoaxnAT016b37Js2a?p=preview

Answer 2

我根据此fiddle进行了一些更改，这是构建字符串的另一种方法。

<ion-toggle toggle-class="toggle-balanced" ng-model="data.turnOnOff" ng-true-value="'On'" ng-false-value="'Off'" ng-change="data.openDatabases(data.turnOnOff)">Databases</ion-toggle>
  <div class="spacer" style="height: 10px;"></div>

  <ion-list ng-show="bd">
    <ion-checkbox ng-repeat="option in db" ng-model="option.checked" ng-checked="option.checked" ng-change="checkChanges()">{{ option.text }}</ion-checkbox>
  </ion-list>
  <div class="spacer" style="height: 10px;"></div>

<强>控制器

$scope.checkChanges = function(){

    var finalString = "";
    for(var i = 0; i < $scope.db.length; i++){
        if($scope.db[i].checked === true){
            finalString += $scope.db[i].text + ', ';
        }
    }

    finalString = finalString.substring(0, finalString.length - 2);
    console.log("soma: "+finalString);

};

这样，var finalString 必须在ng-change函数内，并且可以使用localStorage.setItem / localStorage.getItem在函数外部使用它。

Angularjs更新ng-change上的变量

2 个答案: