我正在试图确定为什么调用我的$scope.reset()
方法不能像我希望的那样工作。我想完成的是:单击Reset按钮后,values
对象将重新初始化,其theState
字段将设置为'one'
。这将导致显示带有id='one'
的div,并隐藏它的2个同级。
当单击Reset时,实际发生的情况是,所有三个div
元素都被隐藏,直到我单击标记为one、Two、three的按钮之一。我假设失败的原因是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>
您的重置函数中缺少一个"s":
$scope.values.theState = 'one';