javascript - 在 ng-repeat 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>

Controller :

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