Question

我有一个小的AngularJS应用程序，大多数ng-click表达式都可以正常工作。

作为示例，我使用submitted=true和submitted=false作为隐藏和显示某些按钮，并将一个类show添加到配料div。但是，我无法在最后一个按钮ng-click="submitted=false"上.restart工作？在此单击时，它应该使表达式submitted=false，因此成分div将不再具有show类，并更改按钮。

怎么回事？

Fiddle

var app = angular.module("app", []);

app.controller("IndexController", ["$scope", function($scope) {

  this.list = {
    "mandag":   {}
  };


  
  	this.submitted = false;
  
    this.addFood = (day, title) => {
      this.list[day] = {
        "food": title,
        "ingredients": []
      };
    }

  this.removeFood = (day) => {
    this.list[day] = {};

  }

  this.addIngredient = (day, ingredient) => {
    this.list[day].ingredients.push({
      "name":   ingredient.name,
      "amount": ingredient.amount,
      "unit":   ingredient.unit
    });

  }

  this.UnSave = () => { 
    this.list.mandag = {};
  }



}]);

.shopping {
  width: 25%;
}

.ingredients {
  opacity: .1;
  transition: opacity 1s ease;
}

.show {
  opacity: 1;
}

button {
  border: none;
  background: transparent;
}

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="app" >
  <div ng-controller="IndexController as vm">
    <div style="margin: 20px; display: inline-block;" ng-repeat="(day, item) in vm.list track by $index" class="card-panel teal col s9">
      <h3>{{day}}</h3>
      <form class="" name="ret" ng-submit="vm.addFood(day, item.food)">
        <input placeholder="" name="inputRet" class="inputRet" ng-disabled="submitted" type="text"  ng-model="item.food" required/>
        <button class="btn waves-effect waves-light addFood" ng-disabled="ret.$invalid" ng-click="submitted=true" ng-hide="submitted">Add</button>
        <a class="btn waves-effect waves-light editFood" ng-click="submitted=false" ng-show="submitted"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a>
        <a ng-click="vm.removeFood(day); submitted=false">remove</a>
      </form>
      <div class="ingredients off" ng-class="{'show': submitted}">
        <p>Ingredienser:</p>
        <ul>
          <li ng-repeat="ingredient in item.ingredients track by $index">
            <button class="btn waves-effect waves-light" ng-click="vm.removeIngredient(day, ingredient); submitted=true">Add</button>
            <span>{{ingredient.name}} ({{ingredient.amount}} {{ingredient.unit}})</span>
          </li>
        </ul>
        <form name="ingredients_form" class="input-field">
          <input placeholder="Ingredient" type="text" name="ingredients_name" ng-model="vm.ingredient[$index].name" value="" required/>
          <input placeholder="Amount" type="number" ng-model="vm.ingredient[$index].amount" value="" required/>
          <select ng-model="vm.ingredient[$index].unit" required>
            <option value="" disabled selected>Choose your option</option>
            <option value="g" title="gram">g</option>
            <option value="kg" title="kilogram">kg</option>
            <option value="l" title="liter">l</option>
          </select>
        </form>
        <button class="btn waves-effect waves-light" ng-disabled="ingredients_form.$invalid" ng-click="vm.addIngredient(day, vm.ingredient[$index]); vm.ingredient[$index] = ''; ">Add</button>
      </div>
    </div>

    <button class="restart" ng-click="vm.UnSave(); submitted=false">Restart</button>
    </div>
    </body>

ng-click表达式不会注册

0 个答案: