如何从多个选择框中保存值，该框在angularjs中使用ng-repeat填充

How to save values from multiple select box which is populated using ng-repeat in angularjs?

本文关键字：angularjs 填充 ng-repeat 保存 选择      更新时间：2023-09-26

>我有一个选择框的列表。更改每个选择框时，我需要将所选选项保存在变量中（可以是数组不确定）。到目前为止，如果只有一个选择框，我可以将所选值保存在变量中。如果我有一组使用 ng-repeat 填充的选择框，我该怎么做？我能够显示更改的值（在页面上的 h4 标签中）。但是我想将该值保存到变量中。我该怎么做？

链接到小提琴

var app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
	 $scope.GetValue = function(value){
	alert($scope.lengthPwd);
  }
  
	$scope.parameterList = [
	{id:"one", text:'Is it red in color?', done:true},
	{id:"two", text:'Is it square shaped?', done:false},
	{id:"three", text:'Does it have vowels?', done:false},
	{id: "four", text:'Allow Repeated characters?', done:true}
	];
	$scope.range = function(min, max, step){
	step = step || 1;
	var input = [];
	for (var i = min; i <= max; i += step) input.push(i);
	return input;
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myCtrl">
 
<label>Enter the total length
<select class="form-control col-md-6" ng-change="GetValue()" ng-model="lengthPwd">
<option ng-repeat="n in range(1,100)">{{n}}</option>
</select>
</label>
<ul class="row unstyled cards col-md-offset-1">
<li class="col-lg-4 col-md-5 card" ng-repeat="parameter in parameterList">
	<label id="sliderLabel">
		<input type="checkbox" ng-model="parameter.done">
		<span>{{parameter.text}}</span>
	</label>
	<select class="form-control" ng-hide="!parameter.done" ng-disabled="anyNum=='any'" ng-change="GetAllVal()" ng-model="test" disabled>
		<option ng-repeat="n in range(1,100)">{{n}}</option>
	</select>
  <h4 id="{{parameter.id+test}}">{{parameter.id+test}}</h4>
</li>
</ul>
</div>
</body>

如果我正确理解您的问题，您希望存储四个选择属性的值。我已经复制了您的代码并添加了所需的逻辑。

从选择器中选择的值将存储在数组中。您可以根据值在数组中的位置访问这些值。这是一个有限的解决方案，但它应该让你朝着正确的方向前进。

参考

var app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
	 $scope.GetValue = function(value){
	alert($scope.lengthPwd);
  }
  
	$scope.parameterList = [
	{id:"one", text:'Is it red in color?', done:true},
	{id:"two", text:'Is it square shaped?', done:false},
	{id:"three", text:'Does it have vowels?', done:false},
	{id: "four", text:'Allow Repeated characters?', done:true}
	];
  
    $scope.valuesArr = [];
	$scope.range = function(min, max, step){
	step = step || 1;
	var input = [];
	for (var i = min; i <= max; i += step) input.push(i);
	return input;
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myCtrl">
 
<label>Enter the total length
<select class="form-control col-md-6" ng-change="GetValue()" ng-model="lengthPwd">
<option ng-repeat="n in range(1,100)">{{n}}</option>
</select>
</label>
<ul class="row unstyled cards col-md-offset-1">
<li class="col-lg-4 col-md-5 card" ng-repeat="parameter in parameterList track by $index">
	<label id="sliderLabel">
		<input type="checkbox" ng-model="parameter.done">
		<span>{{parameter.text}}</span>
	</label>
	<select class="form-control" ng-hide="!parameter.done" ng-disabled="anyNum=='any'" ng-change="GetAllVal()" ng-model="valuesArr[$index]" disabled>
      
            <option ng-repeat="n in range(1,100)" ng-value="n">{{n}}</option>
	</select>
  <h4 id="{{parameter.id+test}}">{{parameter.id+test}}</h4>
  
</li>
</ul>
  <h4> Stored Values -> {{valuesArr}}</h4>
</div>
  
</body>

如果我很好地理解您的问题，您想在相应的<select>中选择值吗？

第1点：我强烈建议您使用ngOptions而不是ngRepeat。 ngOptions正是为<select>标签制作的。

第 2 点：ngRepeat创建自己的范围，因此您不再可以直接访问其中的ngModel，那么您应该最好使用 controller-as-syntax .

您可以使用ngModel作为array来做到这一点，如下所示：

angular.module("app", [])
  .controller("mainCtrl", function() {
    var vm = this;
    vm.GetValue = function(value) {
      alert(vm.lengthPwd);
    }
    vm.parameterList = [  
       {  
          "id":"one",
          "text":"Is it red in color?",
          "done":true
       },
       {  
          "id":"two",
          "text":"Is it square shaped?",
          "done":false
       },
       {  
          "id":"three",
          "text":"Does it have vowels?",
          "done":false
       },
       {  
          "id":"four",
          "text":"Allow Repeated characters?",
          "done":true
       }
    ];
    vm.input = [];
    for (var i = 1; i <= 100; i++) {
      vm.input.push(i);
    }
    vm.set_value = function(index) {
      vm.parameterList[index].selectValue = vm.test[index];
    }
  })
<!DOCTYPE html>
<html ng-app="app">
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>
<body ng-controller="mainCtrl as main">
  <pre ng-bind="main.test | json"></pre>
  <ul class="row unstyled cards col-md-offset-1">
    <li class="col-lg-4 col-md-5 card" ng-repeat="parameter in main.parameterList track by $index">
      <label id="sliderLabel">
        <input type="checkbox" ng-model="parameter.done">
        <span ng-bind="parameter.text"></span>
      </label>
      <select class="form-control" ng-if="parameter.done" ng-options="n for n in main.input" ng-model="main.test[$index]" ng-change="main.set_value($index)" ng-disabled="anyNum == 'any'">
        <option value="">Select</option>
      </select>
      <h4 id="{{parameter.id+test}}" ng-bind="parameter.id + main.test[$index]"></h4>
    </li>
  </ul>
</body>
</html>

试试这个：

  $scope.boxValue = [];
$scope.boxValueChange = function (key,val) {
$scope.boxValue[key] = val;
console.log($scope.boxValue);

}

https://jsfiddle.net/r3bw4qka/5/

相关文章：