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

Question

So i have a group of input fields of location and description that i am repeating over with a show and hide button for the 2nd group

so my 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;
        }

right now if i have more than 1 field of locations and i click add description...every field shows the description input field.

How do i make it so that it only shows the relevant description field?

Answer 1

This is because you are using single variable to show and hide all the description field. Use location's some property to show or hide that.

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

You can add another property to your locations. This property shouldShowDetails for example will hold a boolean that say if for a location you are showing the details or not

This is the edited code

<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

Try to modify your vm.showLocationDetail() to vm.showLocationDetail(location.name). Modify the existing codes within as well of course. What I mean is put a parameter that will serve as a checkpoint on which location should be showLocationDetail will use.

Answer 4

You should show each div by its index position

Try this:

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

Controller:

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