Question

所以我正在以角度js 1.x（1.6）制作Todo应用程序但是我的ng-show和ng-hide不起作用。当您单击编辑按钮编辑当前待办事项时，目标是使文本框显示在待办事项部分中，编辑按钮也会变为完成按钮，因此您可以进行更改。然而，这没有成功。控制台显示没有错误，我相信逻辑是正确的。 `

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

ng-show / ng-hide没有响应，没有控制台错误

1 个答案: