1

我正在使用ng-repeat处理动态表单。我正在使用oi-select库来加载我的位置。oi-select 框具有多选功能。默认情况下，在我的页面加载中，我在该oi-select框中加载第一个选项值。

但是，如果我选择除第一个选项之外的任何其他选项，它会被该值覆盖，我将使用多选功能。由于这个问题，我必须再次选择第一个选项。我的问题是，如何默认将我的第一个选项值加载到oi-select中？

之后，如果我选择任何其他选项，它不会覆盖我在选择框中的第一个值。http://plnkr.co/edit/m6Q02dlHLBCMVLRLfioh?p=preview

我的 HTML 代码

<body class="container row">
      <div ng-app="myApp">
          <div ng-controller="myCtrl">
              <form role="form" name='userForm' novalidate>
                  <div class="container">
                      <div class="row" ng-repeat="user in users">
                          <div class="form-group">
                              <div class="col-md-3">
                                  <label>ID</label>
                                  <input ng-model="user.id" id="user.id" name="user.id" placeholder="Enter bugid" type="text" required readonly disabled>
                              </div>
                              <div class="col-md-3">
                                  <label>Comments</label>
                                  <textarea ng-model="user.comment" id="textarea1" rows="1" required></textarea>
                              </div>
                              <div class="col-md-3 ">
                                  <label>Location</label>
                                  <oi-select ng-model="user.location" multiple oi-options="v for v in locations" ng-init='initLocation(user)' name="select2" required>
                                  </oi-select>
                              </div>
                          </div>

                      </div>
                  </div>
                  <div class="buttonContainer text-center btn-container">
                      <br>
                      <button ng-disabled="userForm.$invalid" type="button" id="adduser" ng-click="adduser()">Add user</button>
                      <button type="button" class="btn button--default btn--small pull-center">Close</button>
                  </div>
              </form>
              <script src="https://code.jquery.com/jquery.min.js"></script>
              <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
              <script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
              <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
          </div>
      </div>
  </body>

我的js代码

var app = angular.module('myApp', ['ngResource', 'oi.select']);
  app.controller('myCtrl', function($scope, $timeout) {
      $scope.ids = [1, 2, 3];
      $scope.users = $scope.ids.map(function(id) {
          return {
              id: id,
              comment: "",
              location: ""
          };
      });
      $scope.locations = ['india', 'usa', 'jermany', 'china', 'Dubai'];
      $scope.initLocation = (user) => {
          $timeout(() => {
              user.location = $scope.locations[0];
          });
      }
      $scope.adduser = function() {
          var data = $scope.users.map(function(user) {
              return {
                  "userid": user.id,
                  "manualcomment": user.comment,
                  "location": user.location
              }
          });

          console.log("data", data)
      }

});
4

0 回答 0