我有几个函数,我不得不混合,因为在<选择:
HTML:
<!-- COUNTRY -->
<select class="account--select" type="text" name="country" ng-model="data.country_id"
ng-options="o.code as o.name for o in content.countries" ng-change="reset();PookycountryChanged()">
<option value="">OTHER*</option>
</select>
指令:
scope.PookycountryChanged = function() {
scope.$watch('data.country_id', function(){
if ('data.country_id' == "OTHER*") {
console.log('this is the other option selected');
}
});
}
目的:当所选选项的值等于'OTHER*'时,能够运行一个函数。现在它被设置为一个简单的console.log。控制台现在什么都没有。
指针吗?
UPDATE with Reset() function
scope.reset = function(){
scope.isenabled = (scope.data.country_id == content.config.pca_country);
scope.country = _.findWhere(scope.content.countries, {code : scope.data.country_id});
};
scope.reset();
更新2:生成的标记:
<select ng-change="reset()" ng-options="o.code as o.name for o in content.countries" ng-model="data.country_id" name="country" type="text" class="account--select ng-scope ng-valid ng-dirty"><option value="" class="">OTHER*</option><option value="0" selected="selected">United Kingdom</option></select>
现在你的代码有一些问题:在PookycountryChanged
中,你没有检查data.country_id
的值,只是创建另一个手表,也在手表你比较字符串'数据。country_id'与字符串"OTHER*",所以它总是false。
如果您选择value=""
模型设置值为null
的项目,那么在手表功能中您可以像下面的代码片段一样检查它。
angular.module('app', [])
.controller('ctrl', function($scope) {
$scope.reset = function() {
$scope.isenabled = ($scope.data.country_id == $scope.content.config.pca_country);
$scope.country = _.findWhere($scope.content.countries, {
code: $scope.data.country_id
});
};
$scope.content = {
config : {pca_country: 3},
countries: [{
code: 1,
name: 'name1'
}, {
code: 2,
name: 'name2'
}, {
code: 3,
name: 'name3'
}, {
code: 4,
name: 'name4'
}, {
code: 5,
name: 'name5'
}, {
code: 6,
name: 'name6'
}, {
code: 7,
name: 'name7'
}]
};
$scope.$watch('data.country_id', function(newVal) {
if (newVal === null) {
console.log('selected others');
}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.js"></script>
<div ng-app="app" ng-controller="ctrl">
<select class="account--select" type="text" name="country" ng-model="data.country_id" ng-options="o.code as o.name for o in content.countries" ng-change="reset();">
<option value="">OTHER*</option>
</select>
{{country}}
</div>
或者你甚至可以避免你的重置函数
angular.module('app', [])
.controller('ctrl', function($scope) {
$scope.content = {
config: {
pca_country: 3
},
countries: [{
code: 1,
name: 'name1'
}, {
code: 2,
name: 'name2'
}, {
code: 3,
name: 'name3'
}, {
code: 4,
name: 'name4'
}, {
code: 5,
name: 'name5'
}, {
code: 6,
name: 'name6'
}, {
code: 7,
name: 'name7'
}]
};
$scope.$watch('data.country_id', function(newVal, oldVal) {
if (newVal !== oldVal && !newVal) {
console.log('selected others');
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.js"></script>
<div ng-app="app" ng-controller="ctrl">
<select class="account--select" type="text" name="country" ng-model="country" ng-options="o.name for o in content.countries" ng-change="data.country_id=country.code;isenabled=country.country_id==content.config.pca_country">
<option value="">OTHER*</option>
</select>
{{country}}
</div>
从ng-change
中删除PookycountryChanged()
,然后删除包装$watch
的函数。在函数中放置一个监视器是没有意义的,因为监视器无论如何都会一直运行。
也把你的选项改成:
<option value="OTHER*">OTHER*</option>
然后去掉data.country_id
:
scope.$watch('data.country_id', function(){
if (data.country_id === "OTHER*") {
console.log('this is the other option selected');
}
});