如何使用ng-click访问ng-show指令?AngularJS

How do I access ng-show directive with ng-click? AngularJS

本文关键字：指令 AngularJS ng-show 访问 何使用 ng-click      更新时间：2023-09-26

我刚开始学习，所以我正在创建一个todo应用程序。当我点击编辑按钮来编辑我的任务时，我试图显示一个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'));
            };
        });
    };
}]);

这里有一个快速解决方案，您有一个名为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隐藏，只在单击其他div时显示。

相关文章：