angularjs - How to set a boolean flag to collapse/expand a row with ng-repeat -

angularjs - How to set a boolean flag to collapse/expand a row with ng-repeat -

i have this plunker code.

what i'm trying do, display grayness box 1 time per row.

to accomplish this, thought modify partition filter in order homecoming json add together new property row know if grayness box expanded or not.

but, not homecoming json.

do know how modify filter homecoming json or improve way show grayness box row?

related questions:

push downwards series of divs when div shown

update 1

the issue resolved using right scope ng-repeat row without modifying filter, @m59.

http://plnkr.co/edit/eemfi1lv6z1mlg7snd6g?p=preview

update 2

live demo

if seek modify item, seems ng-repeat called 1 time again losing props values.

<div ng-repeat="friendrow in friends | partition:2" ng-init="props = {}"> <div ng-repeat="item in friendrow" ng-click="collapse(item)" ng-class="{myarrow: showarrow}"> {{item.name}} {{item.age}} years old. <div>{{item.name}}</div> </div> <div collapse="!props.isexpanded"> content <br/> <input type="text" ng-model="currentitem.name"> </div> </div>

js

$scope.collapse = function(item){ this.props.isexpanded = !this.props.isexpanded; this.showarrow = !this.showarrow; $scope.currentitem = item; };

this causes grayness box collapse each time item modified. clue?

i've updated my code/answer regarding partitioning data. it's of import understand of before deciding on approach project.

the problem have in plnkr demo you're modifying parent $scope , not scope of ng-repeat row.

just set flag on row , toggle when clicked:

live demo <div class="row" ng-repeat="friendrow in friends | partition:2" ng-init="isexpanded = false" ng-click="isexpanded = !isexpanded" > <div ng-repeat="item in friendrow"> {{item.name}} {{item.age}} years old. </div> <div collapse="!isexpanded"> content </div> </div>

to access right scope within function in controller, can utilize this keyword instead of $scope. this refer scope function called from, whereas $scope refers scope attached element ng-controller (a parent of ng-repeat scopes want target).

<div class="row" ng-repeat="friendrow in friends | partition:2" ng-click="collapse()" >

js:

$scope.collapse = function() { this.isexpanded = !this.isexpanded; };

if want maintain ng-click directive on item element instead of putting on row element have done, you're dealing kid scope because of inner ng-repeat. therefore, need follow "dot" rule kid scope can update parent scope collapse directive is. means need nest isexpanded in object. in example, utilize ng-init="props = {}", , utilize props.isexpanded. dot rule works because children share same object reference props, properties shared rather copied, in normal javascript object references.

live demo <div class="row" ng-repeat="friendrow in friends | partition:2" ng-init="props = {}" > <div ng-repeat="item in friendrow" ng-click="collapse()"> {{item.name}} {{item.age}} years old. </div> <div collapse="!props.isexpanded"> content </div> </div>

js:

$scope.collapse = function(){ this.props.isexpanded = !this.props.isexpanded; }; update

we maintain going through more , more issues project. need experiment/research , understand that's going on on deeper level, or 1 question after another. i'll give 1 lastly effort on right track, need seek in basic concepts , go there.

you could past issue of props reinitializing putting $scope.expandedstates , passing $index of current ng-repeat function (or using in view) , setting property of expandedstates $scope.expandedstates[$index] = !$scope.expandedstates[$index]. nested ng-repeat is, you'll need $parent.$index you're associating state row rather item.

however, you'll have problem filter: using old partition code, inputs within partitions going lose focus every time type character. using new code, view updates, underlying model not. utilize partition filter this answer solve this, understanding of code, have unexpected behavior downwards road , requires passing in this argument filter. don't recommend this.

filters meant idempotent, stabilizing them via kind of memoization technically hack. argue should never @ all, think it's fine. however, should when display purposes , not user input! because accepting user input within partitioned view, suggest partitioning info in controller, joining either watch (continuous) or when need submit it.

$scope.partitionedfriends = partitionfilter($scope.friends, 2); $scope.$watch('partitionedfriends', function(val) { $scope.friends = [].concat.apply([], val); }, true); // deep watch

angularjs angularjs-ng-repeat