각도 형식 선택 상자로 ng-repeat

Question

저는 AngularJS 동적 양식으로 작업하고 있습니다. 내 사용자 ID 값에 따라 같은 모델 이름 ng - 반복을 사용하여 여러 양식 필드를 생성했습니다. 내가 선택한 위치를로드하기 위해 선택 상자를 사용하고 있습니다. 내 요구 사항에 따라 기본적으로 그 선택 상자에 첫 번째 옵션 값을로드해야합니다. 첫 번째 옵션 데이터를로드하기 위해 ng-init을 사용하고 있지만 작동하지 않습니다. 내부 컨트롤러 내가 $ scope.user.location 같은 선택 상자 모델 값을 얻으려고했지만 오류가 표시됩니다. 누구든지이 문제에 대한 몇 가지 j 바이올린 솔루션을 보내주십시오.

HTML

<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> 

         <select ng-model="user.location" ng-options="v for v in locations" ng-init='user.location=location[0]' name="select2" required> 

         </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> 

JS 그것은 $ 제한 시간 콜백에 NG-초기화 코드를 실행하는 것입니다 할

var myApp = angular.module('myApp', []); 
myApp.controller('myCtrl', function($scope) { 
    $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.adduser = function() { 
     var data = $scope.users.map(function(user) { 
      //i am trying this method also 
      /*$scope.user.location.push($scope.locations[0]); 
       $scope.user.location = $scope.user.location.slice(); 
       console.log($scope.user.location) its doesnt work. */ 
      return { 
       "userid": user.id, 
       "manualcomment": user.comment, 
       "location": user.location 
      } 
     }); 
     console.log("data", data) 
    } 
}); 

Answer 1

한 가지 방법. 지시문 간의 실행 순서에서 문제가 발생합니다. init를 $ timeout으로 지연시켜 다음 다이제스트에서 트리거합니다.

var myApp = angular.module('myApp', []); 
 
myApp.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) { 
 
     //i am trying this method also 
 
     /*$scope.user.location.push($scope.locations[0]); 
 
     $scope.user.location = $scope.user.location.slice(); 
 
     console.log($scope.user.location) its doesnt work. */ 
 
     return { 
 
     "userid": user.id, 
 
     "manualcomment": user.comment, 
 
     "location": user.location 
 
     } 
 
    }); 
 

 
    console.log("data", data) 
 
    } 
 

 
});

<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> 
 

 
       <select ng-model="user.location" ng-options="v for v in locations" ng-init='initLocation(user)' name="select2" required> 
 

 
         </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>

Answer 2

해당 옵션이 조건이되는 기본적으로 선택되어,

<md-select ng-model="user.location" name="select2" required> 
    <md-option ng-repeat="v in locations" value="{{v}}" ng-selected="v == user.location" > 
               {{v}} 
    </md-option> 
    </md-select> 

는 NG-선택이 조건을 받아 시도 할 수 있습니다 : 여기

은 예입니다 사실