嵌套ng-repeat中的角度ng-show / ng-hide問題

Question

我是棱角新手，我知道這個問題已經被問過很多次了，但我無法在這里提出。

這是我的問題的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>

Answer 1

即使您的JSBin處於部分工作狀態（ textarea下面的“添加”和“ X”按鈕不起作用），也可以在此處找到保持角度的最佳方法。

但是，這種方法似乎不是有角度的。 通常，與控制器中的DOM控制相關的任何事情都不是最佳實踐。 這將為您提供指導 。

無論如何，我完成了另一個JSBin ，但效果很好。 看一看。