重置angularjs模型; NG-秀

时间:2014-09-26 13:46:47

标签: javascript angularjs ng-show angularjs-ng-show

我试图确定为什么调用我的$scope.reset()方法无法正常工作。我想要完成的是:单击“重置”按钮后,values对象将重新初始化,其theState字段将设置为'one'。这应该会导致显示id='one'的div并隐藏它的2个兄弟。

单击“重置”时实际发生的情况是,所有三个div元素都被隐藏,直到我单击其中一个标记为“一,二,三”的按钮。我假设失败的原因是ng-show绑定到的实际对象在$scope.reset()中发生了变化 - 但我不知道如何让视图按我的意愿做出反应。

HTML:

<div ng-controller="AppCtrl">
  <input type="button" ng-click="values.theState='one'" value="One"/>
  <input type="button" ng-click="values.theState='two'" value="Two"/>
  <input type="button" ng-click="values.theState='three'" value="Three"/>

  <div id="one" ng-show="values.theState=='one'">
    This is div=1
  </div>
  <div id="two" ng-show="values.theState=='two'">
    This is div=2
  </div>
  <div id="tre" ng-show="values.theState=='three'">
    This is div=3
  </div>

  <input type="button" ng-click="reset()" value="Reset"/>           
</div>

AngularJS:

<script>
  var app = angular.module("app", []);
  app.controller("AppCtrl", function($scope) {
    $scope.values = {
      theState: 'one'
    };

    $scope.reset = function() {
      $scope.values = {};
      $scope.value.theState = 'one';                    
    }
  });
</script>

1 个答案:

答案 0 :(得分:0)

您在重置功能中缺少's':

$scope.values.theState = 'one';