AngularJS-ng-hide funktioniert nicht

Ich versuche mit ng-hide die Aktion der Schaltfläche "Bearbeiten" anzuzeigen. Dafür benutze ich einen booleschen "Edit" auf diese Weise: "ng-model =" edit "ng-value =" true ", aber es hat keinen Effekt und ich kann nicht herausfinden warum.AngularJS-ng-hide funktioniert nicht

hier ist mein 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' ]); 
})();

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

    } 
}())

Quelle

2016-08-05 user5642508

Was Ihr categoryController aussehen wird? –

ist es "ng-show" oder "ng-hide", mit dem Sie Probleme haben? – Claies

Stellen Sie sicher, dass edit auf True gesetzt ist, wenn Sie den gewünschten Abschnitt ausblenden möchten.

Innen editCategory() sieht aus wie aa guter Platz für dies geschehen kann, statt ng-value=true

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

Quelle

2016-08-05 20:32:18

Ich habe versucht, diese: in index.html und Funktion editCategory() { \t \t \t $ scope.edit = true ; \t} im Controller und hat keine Wirkung. – user5642508

Wird die Methode beim Klick aufgerufen? Haben Sie versucht, eine Debugger-Anweisung zu überprüfen? –

Ah - das Problem ist die ng-Wiederholung. Es erstellt einen neuen isolierten Bereich. Also die Methode und Bearbeitung existiert nicht. Versuchen Sie $ parent.edit und $ parent.ediCategory(). –

Sie so etwas wie:

Quelle

2016-08-05 20:28:30

Ich bin mir nicht sicher, ob es die Art und Weise getan werden kann, Sie versuchen, (ich habe noch nie verwendet diese Technik, aber hier ist, wie ich es tun würde:

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

Wenn Sie edit müssen auf Last um wahr zu sein, könnten Sie entweder es in Ihrem Controller (am besten) oderverwenden:

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

Außerdem sollten Sie einen Punkt in Ihrem ng-model Wert haben: If you are not using a .(dot) in your AngularJS models you are doing it wrong?

Quelle

2016-08-05 20:32:56 isherwood

AngularJS-ng-hide funktioniert nicht

Antwort

Verwandte Themen