Question

我正在尝试使用ng-hide显示“编辑”按钮的操作。为此，我以这种方式使用布尔“编辑”：“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>

// app.js

(function() {
    var myComments = angular.module('myComments', [ 'comment' ]);
    var myCategories = angular.module('myCategories', [ 'category' ]);
    var myTopics = angular.module('myTopics', [ 'topic' ]);
})();

//类别控制器

(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();
        }

    }
}())

Answer 1

如果要隐藏所需的部分，请确保将edit设置为true。

内部editCategory()看起来是一个很好的地方，而不是ng-value=true

在editCategory（）

中设置$scope.edit = true;

Answer 2

做类似的事情：

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

Answer 3

我不确定它是否可以按你尝试的方式完成（我从未使用过这种技术，但这就是我的方法：

<button ng-click="edit=!edit" ... ></button>

如果您在加载时需要edit为真，则可以在控制器中设置（最佳），或使用ng-init：

<button ng-click="edit=!edit" ng-init="edit=true" ... ></button>

此外，您的ng-model值应为If you are not using a .(dot) in your AngularJS models you are doing it wrong?

AngularJS-ng-hide无效

3 个答案: