ng-show/ng-hide не отвечает, нет ошибки в консоли

Question

Так что я делаю приложение Todo в угловом js 1.x (1.6), но мои ng-show и ng-hide не работают. цель состоит в том, чтобы текстовое поле отображалось в секции todo, когда вы нажимаете кнопку редактирования, чтобы редактировать текущие тодоки, также кнопка редактирования становится готовой кнопкой, чтобы вы могли внести изменения. однако это не работает. консоль не показывает ошибок, и я верю, что логика правильная. `

<div ng-controller="todoCtrl as ctrl"> 
     <div> 
     <p>Add a Todo</p> 
     <input type="text" ng-model="ctrl.newTodo"> 
     <button ng-click="ctrl.addNewTodo()">Add</button> 


     </div> 

     <div > 
      <p>Your Todos:</p> 
      <button ng-hide="ctrl.editMode" ng-click="ctrl.triggerEdit">Edit</button> 
      <button ng-show="ctrl.editMode" ng-click="ctrl.triggerEdit">Done</button> 
      <ol> 
      <li ng-repeat="todo in ctrl.todos track by $index"> 
       <span ng-hide="ctrl.editMode" ng-bind="todo"></span> 
       <input ng-model="todo" ng-show="ctrl.editMode" type="text"></input> 
       <button ng-hide="ctrl.editMode" ng-click="ctrl.deleteTodo($index)">Delete</button> 
      </li> 
      </ol> 

     </div> 
    </div> 

`

здесь является JS

var app = angular.module("todoApp", []); 
app.controller("todoCtrl", todoCtrl); 

function todoCtrl(){ 
    this.editMode = false; 
    this.todos = [ 
    "Learn Angular 1", 
    "Try out exercises", 
    "Visit Docs " 
    ]; 

    this.addNewTodo = function(){ 
    this.todos.push(this.newTodo); 
    this.newTodo = ""; 
    } 
    this.triggerEdit = function(){ 
    this.editMode = !this.editMode; 
    } 

    this.deleteTodo = function(index){ 
    this.todos.splice(index, 1); 
    } 
} 

Answer 1

Убедитесь, что вы вызываете функцию triggerEdit() с скобкой. Похоже, вы пропустили их, попробуйте

<button ng-hide="ctrl.editMode" ng-click="ctrl.triggerEdit()">Edit</button> 
<button ng-show="ctrl.editMode" ng-click="ctrl.triggerEdit()">Done</button>