Angular ng-show/ng-hide issue in nested ng-repeat

Question

I'm new to angular and I know this question has already been asked so many times but I'm not able to make it here.

Here is the JSBin for my problem:

What I'm trying to accomplish here a list of cards (trello style) but I'm not able to make it as it does in trello. Here when clicking add card, angular's compile successfully add the card to list but I'm stuck to hide add card anchor tag then. I've applied some ng-show/ng-hide but then it doesn't maintain the index and hides other add card anchor in the ng-repeat (I know its natural but I'm not able to sort it out). Can somebody please help me here. Thanks

Here is the code as well:

Angular code:

angular.module('app', []).controller('DemoCtrl',function($scope,$compile,$window){
    $scope.items = [];
    $scope.idx = '';
    $scope.c = {};

$scope.addNewList = function () {
if(typeof $scope.c.newList === 'undefined'){
 alert('list title blank');
 return;
}
$scope.items.push({listTitle: $scope.c.newList});
$scope.c.newList = '';
};

$scope.addNewCardToList = function(idx) {
$scope.idx = idx;
var elm = '<div class="list-card"><textarea style="overflow: hidden; word-wrap: break-word; resize: none; height: 56px;" ng-model="c.title"></textarea><input type="button" value="Add" ng-click="saveNewCardToList(idx)"><a href="javascript:void(0)" ng-click="closeCard(idx)">X</a><a href="javascript:void(0)"></a></div>';
var temp = $compile(elm)($scope);
if($window.document.getElementsByClassName("list-card").length === 0)
 angular.element(document.querySelector('#compose_'+idx)).append(temp);
};
});

HTML:

<div ng-controller="DemoCtrl">
<div ng-repeat="item in items" style="display:inline-block;width:120px;">
<div>{{item.listTitle}}</div>
    <div ng-repeat="inner in item.items">{{inner}}</div>
    <div id="compose_{{$index}}"></div>
<a href="javascript:void(0)" data-ng-click="addNewCardToList($index);">Add a card...</a>
</div>
<br />
<a href="javascript:void(0)" ng-click="showInput = ! showInput">Add a list...</a>
<div ng-show="showInput">
<input type="text" placeholder="Add a list..." name="title" ng-model="c.newList">
<a href="javascript:void(0)" data-ng-click="addNewList()">Save</a>
</div>
</div>

score 1 · Accepted Answer · edited May 23 '17 at 12:30

1

Even if your JSBin is working partially (Add and X button below textarea are not working), best solution with keeping your approach way about angular is here

BUT, this approach doesn't seems like angular-way. Commonly, anything related with DOM controlling in controller is not best practice. This will be great guide for you.

Anyway, I completed another JSBin just working fine entirely. Take a look.

edited May 23 '17 at 12:30

Community

1
1

answered Dec 20 '15 at 14:48

Jinyoung Kim

1,885
3
14
23

Thanks, well your answer partially solved my issue but the problem is still there. If you see the trello (assuming its built in backbone.js), when you click add card, only compiled (doesn't exist in dom yet) html injected and add card anchor hides, so my concern is there. I was thinking if the way I was addressing it OR your solution would be the way or some directive should be used for this. Thanks anyway. yea I'm going through the link you provided :) – Amit Kumar Dec 20 '15 at 15:40
Oh, I didn't solve your core problem. well, how about use `ng-if`? This compiles DOM when conditions are satisfied. If you don't want also compiled Add a card anchor tag, use `ng-if` instead of `ng-hide`. and I added new `isEditing`property as a flag in item. here is [updated JSBin](http://jsbin.com/qenovikowo/edit?html,js,output). – Jinyoung Kim Dec 20 '15 at 16:02
Thanks, BTW you left one thing - when clicking X add a card anchor hides but I sorted out that thing. now going to implement drag-drop that I have already done (most of trello functionality done). But still wanna know if the above approach is a good one OR there should be some directive :) cause I did this earlier but getting issues in hiding anchor in nested ng-repeat – Amit Kumar Dec 20 '15 at 16:32
I will still wait if I have more better approach as compared to above coz I'm aware that DOM controlling in controller is not good in angularjs and directive should be used instead, if there is not, then I will mark this as answer. Thanks – Amit Kumar Dec 20 '15 at 16:46
DOM controlling what I meant above is actually DOM manipulation and I didn't use manipulation in my controller. Furthermore, I think it was solved in terms of the point of your question(ng-show/ng-hide issue in ng-repeat). But, it is my opinion. Marking answer is up to you. :) – Jinyoung Kim Dec 20 '15 at 17:40

Angular ng-show/ng-hide issue in nested ng-repeat

1 Answers1