숨기기 및 NG-반복 AngularJS와의 개체 당 입력 필드를 표시

Question

그래서 내가 2 그룹

나의 HTML에 대한 표시 및 숨기기 버튼을 통해 반복하고 위치 및 설명의 입력 필드의 그룹이 있습니다 :

<div ng-repeat="location in vm.locations" class="row"> 
    <div class="form-group col-md-12"> 
     <label for="location">Location</label> 
     <input type="text" class="form-control" name="location" ng-model="location.name"> 

     <a class="pull-right" ng-click="vm.showLocationDetail()">Add Description</a> 
    </div> 
    <br> 
    <div ng-show="vm.showDetail" class="form-group col-md-12"> 
     <textarea class="form-control" type="text" name="description" rows="5" ng-model="location.description"></textarea> 
    </div> 
</div> 

컨트롤러 :

// toggle location details 
     vm.showLocationDetail = function() { 
      return vm.showDetail = !vm.showDetail; 
     } 

지금 나는 위치보다 1 개 필드가 나는 설명을 추가 누르면 ... 모든 필드의 내용 입력 필드를 나타낸다.

관련 설명 입력란 만 표시되도록하려면 어떻게해야합니까?

Answer 1

단일 변수를 사용하여 모든 설명 필드를 표시하고 숨기기 때문입니다. 위치의 일부 속성을 사용하여 표시하거나 숨 깁니다.

var MyApp = angular.module("MyApp",[]); 
 
MyApp.controller("MyCtrl",['$scope',MyCtrl]); 
 
function MyCtrl($scope) { 
 
$scope.locations = [{name:'',description:'',showDetail : false},{name:'',description:'',showDetail : false}]; 
 
$scope.showLocationDetail = function(location) { 
 
    location.showDetail = ! location.showDetail; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div ng-app="MyApp" ng-controller="MyCtrl"> 
 
<div ng-repeat="location in locations" class="row"> 
 
    <div class="form-group col-md-12"> 
 
     <label for="location">Location</label> 
 
     <input type="text" class="form-control" name="location" ng-model="location.name"> 
 

 
     <a class="pull-right" ng-click="showLocationDetail(location)">Add Description</a> 
 
    </div> 
 
    <br> 
 
    <div ng-show="location.showDetail" class="form-group col-md-12"> 
 
     <textarea class="form-control" type="text" name="description" rows="5" ng-model="location.description"></textarea> 
 
    </div> 
 
</div> 
 
</div>

Answer 2

위치에 다른 속성을 추가 할 수 있습니다. 예를 들어,이 속성 shouldShowDetails은 위치를 당신이

를 세부 사항을 보여 주거나하지 않는 경우이 편집 된 코드를 귀하의 vm.showLocationDetail()vm.showLocationDetail(location.name)에 수정할 수

<div ng-repeat="location in vm.locations" class="row"> 
    <div class="form-group col-md-12"> 
     <label for="location">Location</label> 
     <input type="text" class="form-control" name="location" ng-model="location.name"> 
     <a class="pull-right" ng-click="location.shouldShowDetails=!location.shouldShowDetails">Add Description</a> 
    </div> 
    <br> 
    <div ng-show="location.shouldShowDetails" class="form-group col-md-12"> 
     <textarea class="form-control" type="text" name="description" rows="5" ng-model="location.description"></textarea> 
    </div> 
</div> 

Answer 3

시도를 말한다 부울을 개최한다. 물론 기존 코드도 수정하십시오. 무슨 뜻인지는 showLocationDetail이 사용할 위치에 대한 검사 점 역할을하는 매개 변수를 넣는 것입니다.

Answer 4

당신은 그것의 인덱스 위치하여 각 사업부를 표시해야합니다

이 시도 :

<div ng-repeat="location in vm.locations" class="row"> 
<div class="form-group col-md-12"> 
    <label for="location">Location</label> 
    <input type="text" class="form-control" name="location" ng-model="location.name"> 

    <a class="pull-right" ng-click="vm.showLocationDetail($index)">Add Description</a> 
</div> 
<br> 
<div ng-show="vm.showDetail[$index]" class="form-group col-md-12"> 
    <textarea class="form-control" type="text" name="description" rows="5" ng-model="location.description"></textarea> 
</div> 

컨트롤러 :

vm.showLocationDetail = function(index) { 
    vm.showDetail[index] = ! vm.showDetail[index]; 
}