Question

我刚开始学习，所以我正在创建一个待办事项应用。当我点击编辑按钮编辑我的任务时，我试图显示div。

这是我的HTML

<div ng-controller='TasksCtrl'>
 <div ng-repeat='(key,  task) in tasksList' class='task-list'>
     <div class='easy'>
        <div class='div-list-style'></div>
        <div id='task-{{key}}' style='cursor:pointer;z-index:5' 
            ng-click='editTask()' data-key='{{key}}' class='options 
            pull-right glyphicon glyphicon-pencil'>
       </div>

       <div class='task-desc' ng-bind='task.description'></div>
       <div ng-hide='taskEdit = true'>FORM</div>
     </div>
 </div>
</div

这是我的控制器

todoApp.controller('TasksCtrl',['$scope', 'saveTaskService', function($scope, saveTaskService){
    $scope.editTask= function(){
        todoApp.directive('taskEdit', function(){

            return function(scope, element){
              //so I guess over here I need do ngHide = 'false' ? //
                alert(element.attr('data-key'));
            };
        });
    };
}]);

Answer 1

这是一个快速解决方案，你有一个名为taskShow的范围变量，它会告诉ng-hide何时显示它，然后在ng-click上你将触发一个将切换该值的函数：

<div ng-controller='TasksCtrl'>
 <div ng-repeat='(key,  task) in tasksList' class='task-list'>
     <div class='easy'>
        <div class='div-list-style'></div>
        <div id='task-{{key}}' style='cursor:pointer;z-index:5' 
            ng-click='toggleHide(key)' data-key='{{key}}' class='options 
            pull-right glyphicon glyphicon-pencil'>
       </div>

       <div class='task-desc' ng-bind='task.description'></div>
       <div ng-show='taskShow[key]'>FORM</div>
     </div>
 </div>
</div>

控制器：

todoApp.controller('TasksCtrl',['$scope', 'saveTaskService', function($scope, saveTaskService){
    $scope.taskShow = {};
    $scope.toggleHide = function (key) {
        $scope.taskShow[key] = !$scope.taskShow[key];
    };
}]);

修改：将ng-hide切换为ng-show，因此默认情况下会隐藏div，只有在点击另一个时才会显示。

如何通过ng-click访问ng-show指令？ AngularJS

1 个答案: