Javascript AngularJS ng隐藏不起作用_Javascript_Angularjs

Javascript AngularJS ng隐藏不起作用

javascript angularjs

Javascript AngularJS ng隐藏不起作用,javascript,angularjs,Javascript,Angularjs,我试图使用ng hide显示“编辑”按钮的动作。为此，我使用了一个布尔“edit”来表示：“ng model=“edit”ng value=“true”，但它没有效果，我也不知道为什么这是我的密码： <!DOCTYPE html> <html > <head> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">

我试图使用ng hide显示“编辑”按钮的动作。为此，我使用了一个布尔“edit”来表示：“ng model=“edit”ng value=“true”，但它没有效果，我也不知道为什么

这是我的密码：

<!DOCTYPE html>
        <html >
        <head>
        <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <meta charset="UTF-8">
        <script src="../../../bower_components/angular/angular.js"></script>
        <script src="app.js"></script>
        <script src="categories/module/category-module.js"></script>
        <script src="categories/controller/category-controller.js"></script>
        <script src="categories/service/category-service.js"></script>
        <title>Categories</title>
        </head>
        <body><div lang="en" ng-app="myCategories">
              <div ng-controller="categoryController">
                <div class="w3-container" ng-init='getCategories()'>

               <h3>Categories</h3>

                 <table class="w3-table w3-bordered w3-striped">
                  <tr>
                      <th>Edit</th>
                      <th>Name</th>
                      <th>Description</th>
                  </tr>
                  <tr ng-repeat="category in categories">
                  <td>
                      <button class="w3-btn w3-ripple" ng-click="editCategory(category.id) " ng-model="edit" ng-value="true">&#9998; Edit</button>
                 </td>
                      <td>{{category.name }}</td>
                      <td>{{ category.description }}</td>
                   </tr>
                      </table>
                      <form ng-hide="edit">
                       <h3 ng-hide="edit">Edit Category:</h3>
                         <label> Name:</label>
                               <input class="w3-input w3-border" type="text" ng-model="name" ng-disabled="!edit" placeholder="{{category.name}}">
                                   <br>
                                  <label>Description:</label>
                                    <input class="w3-input w3-border" type="text" ng-model="description" ng-disabled="!edit" placeholder="{{category.description}}">
                                  <br>
                                      <label>New Description:</label>
                              <input class="w3-input w3-border" type="text" ng-model="newDescription" placeholder="New Description">
                                      <br>
                             <button class="w3-btn w3-green w3-ripple" ng-disabled="error || incomplete">&#10004; Save Changes</button>
                               </form>
                   </div>
                </div>
                </div>
        </body>
        </html>

//类别控制器

(function() {
    'use strict';
    angular.module('category').controller('categoryController',
            topicControllerFunction);
    topicControllerFunction.$inject = [ '$scope', 'categoryService' ];
    function topicControllerFunction($scope, categoryService) {
        $scope.getCategories = getCategories;
        function getCategories() {
            console.log();
            $scope.categories=[];
            var promise=categoryService.getCategories();
            promise.then(function(data){
                if(data!=undefined && data!=null){
                    $scope.categories=data;
                } else{
                    $scope.categories=undefined;
                }
            },function(error){
                console.log('error='+error);
                $scope.categories=undefined;
            })
            categoryService.getCategories();
            $scope.categories = categoryService.getCategories();
        }

    }
}())

做一些类似于：

<span ng-show = "edit  == true">

执行以下操作：

<span ng-show = "edit  == true">

如果要隐藏所需的部分，请确保将

编辑设置为true
内部editCategory（）
看起来是发生这种情况的好地方，而不是ng value=true

在editCategory（）中设置$scope.edit=true；
如果要隐藏所需的部分，请确保将edit
设置为true
内部editCategory（）
看起来是发生这种情况的好地方，而不是ng value=true

在editCategory（）中设置$scope.edit=true；
我不确定是否可以按您尝试的方式完成（我从未使用过这种技术，但我会这样做：
<button ng-click="edit=!edit" ... ></button>

另外，您的ng模型中应该有一个点：
我不确定是否可以按照您尝试的方式来完成（我从未使用过这种技术，但我会这样做：
<button ng-click="edit=!edit" ... ></button>

另外，您的ng模型中应该有一个点
值：
您的分类控制器是什么样子的？您遇到问题的是ng show
还是ng hide
？您的分类控制器是什么样子的？您遇到问题的是ng show
还是ng hide
？我试过这个：✎；在I中编辑ndex.html和函数editCategory（）{$scope.edit=true；}在控制器中，没有任何效果。该方法是否在单击时被调用？是否尝试将调试器语句放入以检查？啊-问题是ng重复。它创建了一个新的隔离作用域。因此该方法和编辑不存在。请尝试$parent.edit和$parent.ediCategory（）。对于最佳架构实践，我建议为ngrepeat and put edit and editCategory（）的内容创建一个指令或组件（取决于您使用的angular版本）在指令的控制器内。谢谢，我按照您的建议进行了操作，似乎一切都正常。我尝试了以下方法：✎；在index.html和函数editCategory（）中编辑（{$scope.Edit=true；}在控制器中，该方法无效。是否在单击时调用该方法？是否尝试将调试器语句放入以检查？啊-问题是ng重复。它创建了一个新的隔离作用域。因此该方法和编辑不存在。请尝试$parent.edit和$parent.ediCategory（）。对于最佳体系结构实践，我建议创建一个指令或组件（取决于您使用的angular版本）的内容，重复并将edit和editCategory（）放入指令的控制器中。谢谢，我听从了您的建议，似乎一切正常。