Question

我使用以下天数对象值使用ng-repeat创建了一组复选框。

$scope.config = { days: [
             {name:'Monday'},
             {name:'Tuesday'},
             {name:'Wednesday'},
             {name:'Thursday'},
             {name:'Friday'},
             {name:'Saturday'},
             {name:'Sunday'},
        ]}
});

我使用ng-repeat的复选框就是这样。

<ul class="list-inline">
<li ng-repeat="day in config.days">
    <div class="checkbox">   
        <label class="xsm-label">
            <input type="checkbox" ng-model="day.selected" value="{{day.name}}" id="cs_select_{{day.name}}" name="selected_days" />&nbsp;{{day.name}}
        </label>
    </div>
</li>
</ul>

我尝试了很多但没有运气，请帮助我如何在变量中存储已选中复选框值的值。

谢谢。

Answer 1

您可能需要使用ng-change指令来执行复选框的on change方法，在函数内部可以存储选中的值

$scope.selected = function(day, index) {
    day.selected ? $scope._selected.push(day.name) : $scope._selected.splice(index, 1)
}

您的HTML应如下所示：

 <li ng-repeat="day in config.days">
    <div class="checkbox">
        <label class="xsm-label">
          <input type="checkbox" ng-model="day.selected" value="{{day.name}}" id="cs_select_{{day.name}}" 
          name="selected_days" ng-change="selected(day, $index)"/>&nbsp;{{day.name}}
                                          ^^^^^^^^^This ^^^^^^^^^
        </label>
    </div>
 </li>

Working Plunkr

Answer 2

您可以使用ng-change，只要选中复选框，就会使用新值更新变量。

下面的代码行将保留最后选中的复选框，如有必要，可以用空字符串替换它。

$scope.selectedDay= day.selected ? day.name : $scope.selectedDay;

＆＃13;

var app = angular.module("MyApp", []).controller("MyCtrl", function($scope) { 

  $scope.config = { days: [
             {name:'Monday'},
             {name:'Tuesday'},
             {name:'Wednesday'},
             {name:'Thursday'},
             {name:'Friday'},
             {name:'Saturday'},
             {name:'Sunday'},
        ]};
        
        
  $scope.storeValue = function(day) {
    $scope.selectedDay= day.selected ? day.name : $scope.selectedDay;
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="MyApp" ng-controller="MyCtrl">
<ul class="list-inline">
<li ng-repeat="day in config.days">
    <div class="checkbox">   
        <label class="xsm-label">
            <input type="checkbox" ng-model="day.selected" value="{{day.name}}" id="cs_select_{{day.name}}" name="selected_days" ng-change="storeValue(day)" />&nbsp;{{day.name}}
        </label>
    </div>
</li>
</ul>

{{selectedDay}}
</body>

＆＃13;

Answer 3

没关系。您可以在config.days数组上循环选择值，并获取selected为true的项目。

＆＃13;

var app = angular.module('app', []);

app.controller('main', ['$scope', function($scope){
  $scope.config = { days: [
             {name:'Monday'},
             {name:'Tuesday'},
             {name:'Wednesday'},
             {name:'Thursday'},
             {name:'Friday'},
             {name:'Saturday'},
             {name:'Sunday'},
        ]};
}]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

  <div ng-app="app" ng-controller="main">
<ul class="list-inline">
<li ng-repeat="day in config.days">
    <div class="checkbox">   
        <label class="xsm-label">
            <input type="checkbox" ng-model="day.selected" value="{{day.name}}" id="cs_select_{{day.name}}" name="selected_days" />&nbsp;{{day.name}}
        </label>
    </div>
</li>
</ul>  
<pre>{{config.days | json}}</pre>

</div>

＆＃13;

Answer 4

包含在您的输入指令ng-change="onChange(day)"中：

<input type="checkbox" ng-model="day.selected" id="cs_select_{{day.name}}" name="selected_days" 
            ng-change="onChange(day)"/>&nbsp;{{day.name}}

然后，在您的控制器中，将函数定义为：

        $scope.onChange = function(day) {

            $scope.lastSelectedDayValue = day.selected ? day.name : '';

            $scope.allSelectedDays = $scope.config.days.filter(function(day){ 
                                                        return day.selected 
                                                    }).map(function(day){
                                                        return day.name 
                                                    });
        }

您将在$scope.lastSelectedDayValue的最后一天点击，$scope.allSelectedDays数组中包含当前时刻所选择的所有日期。

Answer 5

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope) {
    $scope.config = { days: [
             {name:'Monday'},
             {name:'Tuesday'},
             {name:'Wednesday'},
             {name:'Thursday'},
             {name:'Friday'},
             {name:'Saturday'},
             {name:'Sunday'},
        ]};
        
    var arr = [];    
    $scope.getSelected = function(selectedDay) {
      if(arr.indexOf(selectedDay) == -1) {
        arr.push(selectedDay);
      }
      console.log(arr);
    }
   
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <ul class="list-inline">
<li ng-repeat="day in config.days">
    <div class="checkbox">   
        <label class="xsm-label">
            <input type="checkbox" ng-model="selectedDay" value="{{day.name}}" id="cs_select_{{day.name}}" name="selected_days" ng-change="getSelected(day.name)"/>&nbsp;{{day.name}}
        </label>
    </div>
</li>
</ul> 
</div>

使用Angular JS将Checked复选框的值存储在变量中

5 个答案: