基于AngularJs select綁定數(shù)字類型的問(wèn)題
更新時(shí)間：2018年10月08日 08:52:59 作者：天馬3798
今天小編就為大家分享一篇基于AngularJs select綁定數(shù)字類型的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
一、AngularJs中select綁定ng-model數(shù)字類型綁定問(wèn)題
使用ng-model綁定select的時(shí)候默認(rèn)是string字符串，如果指定的number值會(huì)綁定失敗
舉例說(shuō)明：
<body ng-app='module' ng-controller="myCtrl">
請(qǐng)選擇性別：
<select name="sex" ng-model='sex' >
<option value="">請(qǐng)選擇</option>
<option value="1">男</option>
<option value="2">女</option>
</select>
<button type="" ng-click="alter();">修改</button>
</form>
<script>
(function() {
'use strict';
var app= angular.module('module', [
]);
app.controller('myCtrl',function($scope){
$scope.sex="1"; //特別說(shuō)明，此處指定的為字符串，如果是number類型則綁定不成功
console.info($scope);
$scope.alter=function(){
$scope.sex="2";
console.info($scope);
}
});
})();
</script
指定數(shù)值類型，綁定失敗
app.controller('myCtrl',function($scope){
$scope.sex=1; //特別說(shuō)明，此處指定的為字符串，如果是number類型則綁定不成功
$scope.alter=function(){
$scope.sex=2;
console.info($scope);
}
});
解決方案：
請(qǐng)選擇性別：
<select name="sex" ng-model='sex' ng-options='x.id as x.name for x in [{id:1,name:"男"},{id:2,name:"女"}]'>
<option value="">請(qǐng)選擇</option>
</select>
<button type="" ng-click="alter();">修改</button>
如果不一定非得number類型，在修改$scope的時(shí)候指定string類型就行了。
以上這篇基于AngularJs select綁定數(shù)字類型的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
下面小編就為大家?guī)?lái)一篇淺談AngularJS中ng-class的使用方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
angular2+node.js express打包部署的實(shí)戰(zhàn)
本篇文章主要介紹了angular2+node.js express打包部署的實(shí)戰(zhàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
Angularjs分頁(yè)查詢的實(shí)現(xiàn)
本文給大家分享angularjs實(shí)現(xiàn)分頁(yè)查詢功能，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2017-02-02
Angular學(xué)習(xí)教程之RouterLink花式跳轉(zhuǎn)
這篇文章主要給大家介紹了關(guān)于Angular學(xué)習(xí)教程之RouterLink花式跳轉(zhuǎn)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-05-05
AngularJS使用ui-route實(shí)現(xiàn)多層嵌套路由的示例
這篇文章主要介紹了AngularJS使用ui-route實(shí)現(xiàn)多層嵌套路由的示例,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
angularJs中$http獲取后臺(tái)數(shù)據(jù)的實(shí)例講解
今天小編就為大家分享一篇angularJs中$http獲取后臺(tái)數(shù)據(jù)的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
下面小編就為大家?guī)?lái)一篇基于angularJS的表單驗(yàn)證指令介紹。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
AnjularJS中$scope和$rootScope的區(qū)別小結(jié)
這篇文章給大家整理了關(guān)于AnjularJS中$scope和$rootScope的區(qū)別，文中運(yùn)用實(shí)例代碼介紹的很詳細(xì)，有需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。2016-09-09
AngularJS 依賴注入詳解和簡(jiǎn)單實(shí)例
本文主要介紹AngularJS 依賴注入,這里對(duì)依賴注入做了詳細(xì)介紹講解,并提供效果圖和示例代碼以便學(xué)習(xí)參考2016-07-07
這篇文章主要介紹了Angular4編程之表單響應(yīng)功能,結(jié)合實(shí)例形式分析了Angular4表單響應(yīng)功能的具體實(shí)現(xiàn)步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-12-12