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

控制器：

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

现在，如果我有超过 1 个位置字段并且我单击添加描述...每个字段都会显示描述输入字段。

如何让它只显示相关的描述字段？

Answer 1

您可以将另一个属性添加到您的位置。这个属性 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 2

尝试将您的 vm.showLocationDetail() 修改为 vm.showLocationDetail(location.name)。当然也可以修改其中的现有代码。我的意思是放置一个参数作为检查点，应该使用 showLocationDetail 的位置。

Answer 3

这是因为您使用单个变量来显示和隐藏所有描述字段。使用 location's some 属性来显示或隐藏它。

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

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

hide and show only input fields per object in ng-repeat angularJS

javascript

angularjs

angularjs-ng-repeat

angularjs-ng-show