using ng-repeat want use ng-model , ng-show subjectively select area expand purpose of updating pet, place or points. right now, shows p in pets within ng-repeat want show single p's update button clicked. points if can show me how close when update button clicked again. here html angularjs directives:
<table> <thead> <tr> <th colspan="1" class="text-center"> pets, places , points </th> <th colspan="1" class="text-center"> update </th> <tr> <thead> <tbody filter-list="search"ng-repeat="p in pets"> <tr> <td class="col-xs-6 col-sm-6 col-md-6 col-xl-6 merchant"> {{p.pet}}, {{p.place}} , {{p.points}} </td> <td class="col-xs-4 col-sm-4 col-md-4 col-xl-4 update"> <button ng-click="show()">update</button> <br> <div ng-show="showing"> <input placeholder= "pets" ng-model="pets"/> <br> <input placeholder= "places" ng-model="places"/> <br> <input placeholder= "points" ng-model="points"/> <br> <button ng-click="update(pets, places, points)">enter</button> </div> </td> </tr> </tbody> </table> the show(); function
$scope.show = function() { console.log("show") $scope.showing = true; }
sometimes, going basics works best. since know each iteration in ng-repeat creates new scope, in order avoid using inherited show function, simple showing != showing should work (even though it's undefined default, it's fine since that's falsy value, can initialize well).
see here:
angular.module('app', []) .controller('ctrl', function($scope) { $scope.pets = [ {pet: 1, place: 1, points: 1}, {pet: 2, place: 2, points: 2}, {pet: 3, place: 3, points: 3} ]; })<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="ctrl"> <table> <thead> <tr> <th colspan="1" class="text-center"> pets, places , points </th> <th colspan="1" class="text-center"> update </th> <tr> <thead> <tbody ng-repeat="p in pets"> <tr> <td class="col-xs-6 col-sm-6 col-md-6 col-xl-6 merchant"> {{p.pet}}, {{p.place}} , {{p.points}} </td> <td class="col-xs-4 col-sm-4 col-md-4 col-xl-4 update"> <button ng-click="showing = !showing">update</button> <br> <div ng-show="showing"> <input placeholder="pets" ng-model="pets" /> <br> <input placeholder="places" ng-model="places" /> <br> <input placeholder="points" ng-model="points" /> <br> <button ng-click="update(pets, places, points)">enter</button> </div> </td> </tr> </tbody> </table> </div>if don't approach , want use 1 common function (there reasons you'd that, don't see them in example), can use ng-repeat indices, , like:
$scope.show = function(i) { console.log("showing " + i) $scope.showing[i] = true; } and invoke this:
<button ng-click="show($index)">update</button> and control visibility this:
<div ng-show="showing[$index]"> see here:
angular.module('app', []) .controller('ctrl', function($scope) { $scope.showing = []; $scope.pets = [ {pet: 1, place: 1, points: 1}, {pet: 2, place: 2, points: 2}, {pet: 3, place: 3, points: 3} ]; $scope.toggle = function(i) { console.log("show") $scope.showing[i] = !$scope.showing[i]; } })<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="ctrl"> <table> <thead> <tr> <th colspan="1" class="text-center"> pets, places , points </th> <th colspan="1" class="text-center"> update </th> <tr> <thead> <tbody ng-repeat="p in pets"> <tr> <td class="col-xs-6 col-sm-6 col-md-6 col-xl-6 merchant"> {{p.pet}}, {{p.place}} , {{p.points}} </td> <td class="col-xs-4 col-sm-4 col-md-4 col-xl-4 update"> <button ng-click="toggle($index)">update</button> <br> <div ng-show="showing[$index]"> <input placeholder="pets" ng-model="pets" /> <br> <input placeholder="places" ng-model="places" /> <br> <input placeholder="points" ng-model="points" /> <br> <button ng-click="update(pets, places, points)">enter</button> </div> </td> </tr> </tbody> </table> </div>