javascript - angularjs モデルのリセット。NG-ショー

Question

$scope.reset()メソッドの呼び出しが期待どおりに機能しない理由を特定しようとしています。私が達成したいのは、[リセット] ボタンをクリックすると、valuesオブジェクトが再初期化され、そのtheStateフィールドが に設定されること'one'です。これにより、divid='one'が表示され、2 つの兄弟が非表示になります。

[リセット] をクリックすると、実際にはdiv、One、Two、Three というラベルの付いたボタンのいずれかをクリックするまで、3 つの要素がすべて非表示になります。これが失敗する理由は、バインドされている実際のオブジェクト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>

Answer 1

リセット関数に「s」がありません:

$scope.values.theState = 'one';