Question

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

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

之后，如果我选择任何其他选项，它将不会覆盖我在选择框中的第一个值。这是我的plunker链接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>

我的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)
  }

 });

Answer 1

如果您使用multiple属性，这意味着模型应该是一个数组，而不是您的案例user.location = $scope.locations[0];中的字符串，ypu必须将其更改为location: []并且使用push() method将初始项添加到此数组中;
使用$timeout对我没有任何意义;
ngInit在模板中添加了不必要的逻辑，我希望在您的情况下避免使用它，只需在控制器中使用location: [$scope.locations[0]]。

工作示例：

var app = angular.module('myApp', ['ngResource', 'oi.select']);

app.controller('myCtrl', function($scope, $timeout) {
  $scope.ids = [1, 2];
  
  $scope.locations = ['india', 'usa', 'jermany', 'china', 'Dubai'];
    
  $scope.users = $scope.ids.map(function(id) {
    return {
      id: id,
      comment: "",
      location: []
    };
  });

  $scope.initLocation = (user, locations) => {
    if (!user.location.length) {
      user.location.push(locations[0]);
    } 
  }
  
  $scope.adduser = function() {
    $scope.users.push({
      id: Math.max(...($scope.users.map(u => { return u.id; }))) + 1,
      comment: "added from controller",
      location: [$scope.locations[2]]
    });
  }

});

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <link rel="stylesheet" href="//rawgit.com/tamtakoe/oi.select/master/dist/select.css" />
  
    <script>document.write('<base href="' + document.location + '" />');</script>
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
    <script data-require="angular-resource@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-resource.js"></script>
    <script src="//rawgit.com/tamtakoe/oi.select/master/dist/select-tpls.js"></script>
    <script src="script.js"></script>
  </head>

  <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, locations)' 
              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>
  </div>
  </body>

</html>

ng-init值在有角度的oi-select多选项中被覆盖

1 个答案: