Question

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
 $scope.questions = ["Select a question from the following options.", "What is your favorite color?", "What is your favorite sport?","What is your favorite car?","What is your first pet name?","What is your first car color?"];

   });

</script>
<body>

<div  ng-app="myApp" ng-controller="myCtrl">
<div class="form-group">
                <label for="firstname" class="col-sm-3 control-label" id="consumerChoice">Consumer's Choices</label>
                
                <div class="col-sm-9">
                    <div class="row">
                        <div class="col-sm-9">
            <select ng-model="selectedName" ng-options="x for x in questions" class="form-control">
                    </select>
                            </div> <div class="col-sm-3">
                    <input type="text" class="form-control" placeholder="Answer">
                </div></div>
                <div class="row">
                        <div class="col-sm-9">
            <select ng-model="selectedName" ng-options="x for x in questions" class="form-control">
                    </select>
                            </div> <div class="col-sm-3">
                    <input type="text" class="form-control" placeholder="Answer">
                </div></div>
                    <div class="row">
                        <div class="col-sm-9">
            <select ng-model="selectedName" ng-options="x for x in questions" class="form-control">
                    </select>
                            </div> <div class="col-sm-3">
                    <input type="text" class="form-control" placeholder="Answer">
          </div></div>
</div>
</div>

</body>
</html>

我正在使用angular js在下拉列表及其答案中开发多个安全问题。问题是这些问题来自控制器内部的一个数组，点击下拉列表，所有其他下拉菜单也在变化，第一个选择的选项不应该显示在其他下拉菜单中。我需要避免它。我不要我知道我在哪里弄错了。

Answer 1

每个选择的ng-model应该是不同的：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.questions = ["Select a question from the following options.", "What is your favorite color?", "What is your favorite sport?", "What is your favorite car?", "What is your first pet name?", "What is your first car color?"];
  $scope.model = {};

});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body>

  <div ng-app="myApp" ng-controller="myCtrl">
    <div class="form-group">
      <label for="firstname" class="col-sm-3 control-label" id="consumerChoice">Consumer's Choices</label>

      <div class="col-sm-9">
        <div class="row">
          <div class="col-sm-9">
            <select ng-model="selectedName1" class="form-control">
            <option value="{{x}}" ng-repeat="x in questions track by $index">{{x}} </option>
                    </select>
          </div>
          <div class="col-sm-3">
            <input type="text" class="form-control" placeholder="Answer">
          </div>
        </div>
        <div class="row">
          <div class="col-sm-9">
            <select ng-model="selectedName2" class="form-control">
              <option ng-if="selectedName1 != x" value="{{x}}" ng-repeat="x in questions track by $index">{{x}}  </option>
            </select>
          </div>
          <div class="col-sm-3">
            <input type="text" class="form-control" placeholder="Answer">
          </div>
        </div>
        <div class="row">
          <div class="col-sm-9">
            <select ng-model="selectedName3" class="form-control">
              <option value="{{x}}" ng-if="selectedName1 != x && selectedName2 != x" ng-repeat="x in questions track by $index">{{x}} </option>
            </select>
          </div>
          <div class="col-sm-3">
            <input type="text" class="form-control" placeholder="Answer">
          </div>
        </div>
      </div>
    </div>

</body>

</html>

Answer 2

请为不同的选择标签设置不同的名称

您不能对不同的选择标记使用相同的模型。

角度js

2 个答案: