[英]Iterating over array of objects in Javascript
我正在使用angularjs。我有一个选择框。在选择中,我通过执行ng-repeat显示所有运动名称,其中可以选择多个运动名称。
这是我的HTML
<div class="form-group">
<label for="exampleInputEmail1">Selct Exercises</label>
<select class="form-control select2" multiple>
<option data-ng-repeat="exercise in exercises" value="
{{exercise}}" data-ng-checked="selection.indexOf(exercise) > -1" data-ng-click="toggleSelectionExercise(exercise)">
{{exercise.name}}</option>
</select>
</div>
现在选择多个练习名称onclick之后,我正在调用此函数
Controller.js
$scope.parameterTest = [];
$scope.parameter1 = [];
var exercise = [];
$scope.toggleSelectionExercise = function
toggleSelection(exercise) {
var idx = $scope.parameterTest.indexOf(exercise);
if (idx > -1) {
$scope.parameterTest.splice(idx, 1);
} else {
console.log(exercise);
$scope.parameterTest.push(exercise);
for (var i = 0; i < $scope.parameterTest.length; i++) {
var parameter1 = {
"exid": exercise._id,
"modify": 0,
"sets": exercise.sets,
"reps": exercise.reps,
"rest_duration": 60,
"ord": 0
};
/*Setting in json format and storing in parameter1*/
$scope.parameterTest[i] = parameter1;
/*parameter1 value passing to $scope.parameterTest[i]*/
console.log($scope.parameterTest[i]);
}
}
}
我正在将运动对象传递给函数。从运动对象中我正在设置值并以JSON格式传递并将其存储在变量parameter1
。
我想将下拉菜单中选择的每个对象设置为此格式,这就是为什么我要迭代每个对象并设置格式和值。
但是现在如果我从下拉列表中选择一个选项,它将显示该对象并设置正确的值和格式;但是如果我选择多个选项,则对于2个选项,它将显示如下
以JSON格式设置的第一个对象值
对象{exid: "59bc2dbc53bdcb7171732eab", modify: 0, sets: 3, reps: Array[6], rest_duration: 60…}
在JSON格式对象{exid: "59bc2d9453bdcb7171732eaa", modify: 0, sets: 3, reps: Array[6], rest_duration: 60…}
设置的第二个对象值{exid: "59bc2d9453bdcb7171732eaa", modify: 0, sets: 3, reps: Array[6], rest_duration: 60…}
显示第二次对象的第二个选项{exid: "59bc2d9453bdcb7171732eaa", modify: 0, sets: 3, reps: Array[6], rest_duration: 60…}
如果我选择两个选项,它将显示一次第一个对象,两次显示第二个对象。
我不知道我在哪里做错了。 我是否在正确执行循环?
可能是您在做什么是错误的。
JSfiddle用于工作示例代码
对于“ else ”块中的代码,我有点困惑,在该代码中,您将“ exercise ”对象推到“ $ scope.parameterTest ”数组,然后迭代并将从同一“ exercise ”对象获得的另一个对象分配给“ $ scope”。 parameterTest ”数组。
而且我认为您在$ scope.parameterTest中检查现有的“ exercise ”对象是错误的,因为您通过分配“ parameter1 ”值更改了保存在“ $ scope.parameterTest ”中的“ exercise”对象。
$scope.parameterTest[i] = parameter1;
如果您确实需要修改运动对象,请更改
var idx = $scope.parameterTest.indexOf(exercise);
至
var exerciseItemFoundInArray = false;
var exerciseItemFoundIndex = -1;
for(var i = 0; i < $scope.parameterTest.length; i++) {
if ($scope.parameterTest[i].exid == exercise._id) {
exerciseItemFoundInArray = true;
exerciseItemFoundIndex = i;
break;
}
}
if (exerciseItemFoundInArray == true && exerciseItemFoundIndex != -1)
{
$scope.parameterTest.splice(idx, 1);
}
或查找以下所有大多数浏览器(IE-12,Chrome 45等)都支持的索引使用
var idx = $scope.parameterTest.findindex((item)=> {return item.exid == exercise._id});
我已经删除了“ for”循环,因为它是不必要的。 函数“ toggleExerciseSelection”的修订代码
$scope.toggleSelectionExercise = function
toggleSelection(exercise) {
var exerciseItemFoundInArray = false;
var exerciseItemFoundIndex = -1;
for(var i = 0; i < $scope.parameterTest.length; i++) {
if ($scope.parameterTest[i].exid == exercise._id) {
exerciseItemFoundInArray = true;
exerciseItemFoundIndex = i;
break;
}
}
if (exerciseItemFoundInArray == true && exerciseItemFoundIndex != -1)
{
$scope.parameterTest.splice(exerciseItemFoundIndex, 1);
console.log( $scope.parameterTest);
} else {
var parameter1 = {
"exid": exercise._id,
"modify": 0,
"sets": exercise.sets,
"reps": exercise.reps,
"rest_duration": 60,
"ord": 0
};
$scope.parameterTest.push(parameter1);
console.log( $scope.parameterTest);
}
};
尝试执行此ng-change和ng-model以在HTML中进行选择
<select ng-model="is_checked" ng-change="hey(is_checked)" multiple>
<option ng-repeat="x in names">{{x}}</option>
</select>
在Controller中is_checked返回单击的选项,如果未添加则检查选项是否在列表中,否则将其拼接。
$scope.checkedvalues = [];
$scope.hey = function(is_checked){
var option = $scope.checkedvalues.indexOf(is_checked);
// if option in list
$scope.checkedvalues.splice(option,1);
}else{
$scope.checkedvalues.push(is_checked);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.