非表示とNG-リピートangularJSにおけるオブジェクトごとのみの入力フィールドを表示

Question

ので、私は第二グループ

ので、私の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> 

コントローラ：私は場所の1つの以上のフィールドを持っていると私は説明を追加]をクリックした場合

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

は今...すべてのフィールドは、説明の入力フィールドを示しています。

関連する説明フィールドのみを表示するにはどうすればよいですか？

Answer 1

これは、単一変数を使用してすべての説明フィールドを表示および非表示にするためです。場所を表示または非表示にするには、locationのプロパティを使用します。

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あなたは

詳細を示すか、されていない場所のためにこれは、編集されたコード

<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

であれば言うブール値を保持しますあなたのvm.showLocationDetail()vm.showLocationDetail(location.name)にを変更してください。もちろん、既存のコードも変更してください。私が意味することは、どこの場所にチェックポイントとして役立つパラメータを入れて、​​が使用するはずであるということです。

Answer 4

あなたは、そのインデックス位置によってそれぞれのdivが表示されるはずです

これを試してみてください：

<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]; 
}