0

我正在使用ng-repeat動態表單。我正在使用oi-select庫來加載我的位置。 oi選擇框具有多選功能。在我的頁面加載默認情況下,我正在加載第一個選項值在該oi選擇框中。在角度oi選擇多個選項中覆蓋的ng-init值

但我正在使用多選功能,如果我選擇任何其他選項,而不是第一個選項,它會被該值覆蓋。由於這個問題,我必須再次選擇第一個選項。我的問題是,我如何將默認的第一個選項值加載到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) 
    } 

}); 
+0

是你能解決這個問題? –

+0

如果位置是靜態數據,它工作正常。但根據我的新要求,我在模態彈出窗口中加載此表單。我的位置值來自api調用。只有第一次,如果我點擊我的模態彈出按鈕我的第一個位置數據默認情況下沒有加載選擇框,ng-init()方法不起作用。但如果我再次點擊彈出按鈕它的工作正常。第一次沒有加載第一個位置值。我在這裏附上了我的plunker鏈接。請幫助我.https://plnkr.co/edit/xDVetaZIzpFdKLS9ihU6?p =預覽 – user3760261

回答

0
  1. 如果使用multiple屬性,這個我ans模型應該是一個數組而不是字符串,因爲在你的情況user.location = $scope.locations[0];中,ypu必須將其更改爲location: []並使用push() method將初始項添加到此數組;

  2. 使用$timeout對我沒有任何意義;

  3. 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="[email protected]" 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="[email protected]" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script> 
 
    <script data-require="[email protected]" 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>