有角度的ng显示/ng隐藏嵌套ng重复中的问题
Angular ng-show/ng-hide issue in nested ng-repeat
我是angular的新手,我知道这个问题已经被问了很多次了,但我在这里做不到。
这是我的问题的JSBin:
我想在这里完成的是一张卡片列表(trello风格),但我无法像在trello中那样完成。在这里,当点击添加卡片时,angular的编译成功地将卡片添加到列表中,但我当时被卡住了,无法隐藏添加卡片锚标签。我已经应用了一些ng显示/ng隐藏,但它不维护索引,并在ng重复中隐藏其他添加卡锚(我知道这很自然,但我无法解决)。有人能帮我一下吗。感谢
这也是代码:
角度代码:
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>
即使您的JSBin部分工作(textarea
下面的Add和X按钮不工作),最好的解决方案是保持您的方法在这里吗
但是,这种方法看起来并不是一种棱角分明的方式。通常,控制器中与DOM控制相关的任何操作都不是最佳实践。这将是一本很好的指南。
不管怎样,我完成了另一个JSBin,只是工作得很好。看一看。
相关文章:
- ng绑定和ng href问题.ng href未从控制器加载数据
- ng include导致角度问题
- 将输入值设置为ng模型属性[Angular]时出现问题
- 绑定的角度ng-max问题
- 使用ng-include渲染Angular模板时出现问题
- 使用 ng 模型获取数据时遇到问题
- Angularjs ng-options 问题仅适用于 Chrome 浏览器
- Angular2 ng if有什么问题
- 在我的HTML中用ng-init初始化$scope变量时出现问题
- 使用ng repeat实现firebaseArray时遇到问题
- 嵌套ng包含的角度问题
- AngularJS-$routeProvider和数据ng视图的问题
- 日期选择器的ng更改问题
- 使用ng repeat添加多个视图实例时的范围界定问题
- 角度:多个 ng 假设问题
- 使用 ng 重复的网格问题
- 在 AngularJS 中使用 ng-repeat 渲染 HTML 值时出现问题
- AngularJS ng-pattern的正则表达式问题
- NG重复角度“2层”JSON问题
- angularjs ng-view - jQuery 插件问题 - 需要建议