[英]Angular ng-show/ng-hide issue in nested ng-repeat
我是棱角新手,我知道这个问题已经被问过很多次了,但我无法在这里提出。
这是我的问题的JSBin :
我要在此处完成的卡片清单(trello样式),但我无法像trello那样做到。 在这里,单击添加卡片时,angular的编译成功地将卡片添加到列表中,但是我被困于隐藏添加卡片锚标签。 我应用了一些ng-show / ng-hide,但是它不维护索引,并且在ng-repeat中隐藏了其他添加卡锚(我知道它是自然的,但我无法对其进行整理)。 有人可以在这里帮我吗。 谢谢
这也是代码:
角度代码 :
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.