AngularJS-ng-hide not working

Question

I am trying to use ng-hide to display the action of "Edit" button. For this, I am using a boolean "edit" in this way: "ng-model="edit" ng-value="true", but it has no effect and I can't figure it out why.

Here is my code:

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

//category-controller

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

    }
}())

What does your categoryController look like?

Artem K.
– Artem K.

2016-08-05 20:29:07 +00:00
Commented Aug 5, 2016 at 20:29 — Artem K.
– Artem K., Commented Aug 5, 2016 at 20:29
is it ng-show or ng-hide you are having trouble with?

Claies
– Claies

2016-08-05 20:34:25 +00:00
Commented Aug 5, 2016 at 20:34 — Claies
– Claies, Commented Aug 5, 2016 at 20:34

Artem K. · Accepted Answer · 2016-08-05 20:32:18Z

2

Make sure edit is set to true in the case where you want to hide the desired section.

Inside editCategory() looks like a a good place for this to happen, instead of ng-value=true

Set $scope.edit = true; in editCategory()

answered Aug 5, 2016 at 20:32

Artem K.

8046 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user5642508 Over a year ago

I tried this: <button class="w3-btn w3-ripple" ng-click="editCategory()">✎ Edit</button> in index.html and function editCategory() { $scope.edit=true; } in controller and has no effect.

Artem K. Over a year ago

Does the method get called on click? Have you tried to put a debugger statement in to check?

Artem K. Over a year ago

Ah - the issue is the ng-repeat. It creates a new isolated scope. So the method and edit don't exist. Try $parent.edit and $parent.ediCategory().

Artem K. Over a year ago

For best architecture practices I recommend creating a directive or component (depends on which version of angular you're using) for the content of the ngrepeat and put edit and editCategory() inside the directive's controller.

user5642508 Over a year ago

Thank you, I followed your advise and everything seems to be working fine.

Jean-Michel Provencher · Accepted Answer · 2016-08-05 20:28:30Z

0

Do something like:

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

answered Aug 5, 2016 at 20:28

Jean-Michel Provencher

7336 silver badges16 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:00:59Z

0

I'm not sure if it can be done the way you're attempting (I've never used that technique, but here's how I'd do it:

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

If you need edit to be true on load, you could either set it in your controller (best), or use ng-init:

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

Also, you should have a dot in your ng-model value: If you are not using a .(dot) in your AngularJS models you are doing it wrong?

edited May 23, 2017 at 12:00

CommunityBot

11 silver badge

answered Aug 5, 2016 at 20:32

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

Collectives™ on Stack Overflow

AngularJS-ng-hide not working

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related