0

ng-repeat .i로 동적 양식으로 작업하고 있습니다. 내 사용자 ID에 따라 동적 양식을 얻고 있습니다. 각 양식에 삭제 버튼이 있습니다. 내 요구 사항은 일단 내가 그 특정 양식과 내 사용자 obj 및 내가 서버에 보낼 필요가 남은 값에서 그 값을 삭제할 필요가 삭제 버튼을 클릭입니다. 이 예제에서는 id 2 (두 번째 양식) 및 첫 번째 및 두 번째 양식 데이터를 삭제하려면 하나의 변수를 저장해야합니다. 이것을 위해 약간의 바이올린을 보내주십시오. 내가 추가하고 사용자의 요구 사항에 따라각도 형식 ng-repeat 단일 양식 삭제

내 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='initLocation(user)' name="select2" required> 

         </select> 
        </div> 
        <div> 
         <button>delete</button> 
        </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> 

</div> 

JS가

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) { 
     return { 
      "userid": user.id, 
      "manualcomment": user.comment, 
      "location": user.location 
     } 
    }); 

    console.log("data", data) 
} 

}); 

답변

0

파일 버튼을 추가 removeSelForm 방법을 삭제하고 그 함수 매개 변수에 사용자 개체를 전달할 수 NG를 클릭합니다. 컨트롤러에서 사용자 개체에서 특정 양식 값을 제거합니다.

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.removeSelForm = function(item) { 
 
     var index = $scope.users.indexOf(item) 
 
     $scope.users.splice(index, 1); 
 

 
    } 
 
    $scope.adduser = function() { 
 
     var data = $scope.users.map(function(user) { 
 
      return { 
 
       "userid": user.id, 
 
       "manualcomment": user.comment, 
 
       "location": user.location 
 
      } 
 
     }); 
 

 
     console.log("data", data) 
 
    } 
 

 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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> 
 
          <button ng-click="removeSelForm(user)">delete</button> 
 
         </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> 
 

 
    </div>