【发布时间】：2018-02-24 19:13:53
【问题描述】：
我正在使用 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)
}
});
【问题讨论】：
-
您能解决问题吗？
-
如果位置是静态数据，它工作正常。但根据我的新要求，我在 modal popup 中加载此表单。我的位置值来自 api 调用。仅当我第一次单击模态弹出按钮时，我的第一个位置数据默认未加载到选择框内，ng-init() 方法不起作用。但是，如果我再次单击弹出按钮，它工作正常。第一次没有加载第一个位置值。我在这里附上了我的 plunker 链接。请帮助我。plnkr.co/edit/xDVetaZIzpFdKLS9ihU6?p=preview
标签： angularjs select angularjs-ng-repeat ng-options angular-formly