Question

我正在使用angularjs.I我有一个选择框。在选择中我通过执行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>

现在选择多个运动名称后，我正在调用此功能

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…}

如果我选择两个选项，它会显示第一个对象一次，第二个对象显示两次。

我不知道我做错了什么。我正在做正确的循环吗？

Answer 1

你可能正在做的事情是错误的。

JSfiddle了解工作示例代码

我对＆＃34; 其他＆＃34;中的代码感到有些困惑。阻止你推动＆＃34; 练习＆＃34;反对＆＃34; $ scope.parameterTest ＆＃34;然后迭代并分配一个不同的对象，从同一个＆＃34; 练习＆＃34;反对＆＃34; $ scope.parameterTest ＆＃34;阵列。

我认为你在哪里检查现有的＆＃34; 练习＆＃34;对象在＆＃34; $ scope.parameterTest ＆＃34;是错的，因为你改变了＆＃34;练习＆＃34;对象保存在＆＃34; $ scope.parameterTest ＆＃34;从指定＆＃34; 参数1 ＆＃34;值。

$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});

我已删除你的＆＃34; for＆＃34;循环，因为它是不必要的。修改后的函数＆＃34; toggleExerciseSelection＆＃34;

$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);
    }
};

Answer 2

尝试使用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中返回选项clicked check如果该选项已在列表中，如果不添加它，则将其拼接。

$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);
    }
}

在Javascript

2 个答案: