0
ng-repeat를 사용하여 동적 양식을 작성하고 있습니다. 내 위치를로드하는 데 oi-select 라이브러리를 사용하고 있습니다. 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 코드
됩니다 오버라이드 (override)하지 않습니다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)
}
});
당신이 문제를 해결할 수 있었습니까? –
위치가 정적 데이터 인 경우 잘 작동합니다. 하지만 내 새 요구 사항에 따라 모달 팝업 안에이 양식을로드하고 있습니다. 내 위치 값은 API 호출에서 가져옵니다. 오직 모달 팝업 버튼을 클릭하면 첫 번째 위치 데이터가 기본적으로 선택 상자에로드되지 않고 ng-init() 메소드가 작동하지 않습니다. 하지만 다시 팝업 버튼을 클릭하면 잘 작동합니다. 처음으로 첫 번째 위치 값이로드되지 않았습니다. 나는 여기에 내 plunker 링크를 첨부했습니다. 도와주세요 .https : //plnkr.co/edit/xDVetaZIzpFdKLS9ihU6? p = 미리보기 – user3760261