Javascript 在ng repeat angularJS中仅隐藏和显示每个对象的输入字段

因此，我有一组位置和描述的输入字段，我用第二组的显示和隐藏按钮重复这些字段

因此，我的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>

现在，如果我有一个以上的位置字段，并且我单击添加描述…每个字段都显示描述输入字段

---

如何使其仅显示相关的描述字段？

您可以将其他属性添加到您的位置。例如，此属性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>

---

尝试将vm.showLocationDetail修改为vm.showLocationDetaillocation.name。当然，也要修改其中的现有代码。我的意思是放置一个参数，该参数将用作检查点，在该位置上应显示LocationDetail将使用。

这是因为您使用单个变量来显示和隐藏所有描述字段。使用位置的某些属性来显示或隐藏该位置

var MyApp=angular.modulemyyapp，[]； MyApp.controllerMyCtrl，['$scope'，MyCtrl]； 函数MyCtrl$scope{ $scope.locations=[{name:，description:，showDetail:false}，{name:，description:，showDetail:false}]； $scope.showLocationDetail=函数位置{ location.showtail=！location.showtail； } } 地方 添加说明

---

您应该通过索引位置显示每个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>

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