0

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

    }
}())
user5642508
  • 109
  • 9

3 Answers3

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

Artem K.
  • 804
  • 6
  • 15
  • I tried this: in index.html and function editCategory() { $scope.edit=true; } in controller and has no effect. – user5642508 Aug 05 '16 at 21:19
  • Does the method get called on click? Have you tried to put a debugger statement in to check? – Artem K. Aug 07 '16 at 14:33
  • 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. Aug 07 '16 at 14:35
  • 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. – Artem K. Aug 07 '16 at 14:40
  • Thank you, I followed your advise and everything seems to be working fine. – user5642508 Aug 07 '16 at 17:14
0

Do something like:

<span ng-show = "edit  == true">
Jean-Michel Provencher
  • 705
  • 5
  • 15
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?

Community
  • 1
  • 1
isherwood
  • 58,414
  • 16
  • 114
  • 157