<section ng-app="app" ng-controller="ctrl">
<p ng-show="check && form.$invalid"></p>
<form name="form" ng-submit="init()">
<input type="text" ng-model="text" required/>
<!-- <input type="submit" ng-click="alterCheck()"/> -->
<input type="submit" ng-click="check=true"/>
</form>
</section>
angular.module('app', [])
.controller('ctrl', function($scope){
$scope.check = false;
$scope.init2 = function() {
$scope.text = '';
}
$scope.init = function() {
$scope.init2();
$scope.check = false;
}
$scope.alterCheck = function() {
$scope.check = true;
}
})
在實際專案中,使用ng-click="check=true"
的方法會造成點擊後p
處於顯示的狀態,而ng-click="alterCheck()"
則不會,請問這是什麼原因呢?
上述程式碼無法復現我所說的現象。有什麼額外的原因可能造成這現象嗎?
我想大声告诉你2017-05-15 17:05:45
我在這個例子裡可以重現類似你描述的問題(因為之前遇到過,所以多看了幾眼):
<p ng-controller="DemoCtrl">
<ul>
<li ng-repeat="item in items">
<input type="radio" name="group" ng-model="item.checked" ng-click="checkIndex = $index">{{ item.name }}
<!-- <input type="radio" name="group" ng-model="item.checked" ng-click="changeCheckIndex($index)">{{ item.name }} -->
</li>
</ul>
checkIndex: {{ checkIndex }}
</p>
var demo = angular.module('myApp', []);
demo.controller('DemoCtrl', function($scope, $timeout){
$scope.checkIndex = 0;
$scope.changeCheckIndex = function(index){
$scope.checkIndex = index;
};
$scope.items = [{
name: 'Beijing',
checked: false
},{
name: 'Shanghai',
checked: false
},{
name: 'Taiyuan',
checked: false
}];
});
這是一個很簡單的demo,透過
ng-repeat
显示一组单选框,通过点击点选按钮,在下面的checkIndex: {{ checkIndex }}
中显示选中的单选框的$index
。線上demo看這裡:jsfiddle
如果運行目前的程式碼,會發現,{{ checkIndex }}
壓根沒有變化,無論你怎麼使勁點,戳破滑鼠也沒用
但如果template
換成我註解掉的那部分程式碼,改用changeCheckIndex
方法,template
换成我注释掉的那部分代码,改用changeCheckIndex
方法,{{ checkIndex }}
就改變了。
那麼問題來了,如何造成這個局面的?我們還是要回到文檔去(最近發現ng
的文檔還是不錯的):
我認為原因在於
checkIndex = $index
的写法,使得checkIndex
是一个在每个template instance中独立$scope
下的变量,并不是我们在Controller
裡定義的那個。
文檔地址: ngRepeat