选择的AngularJS ngModel指令

问题描述：

我正在开发一个angularjs项目，并且我在ngModel没有在select中绑定的问题。但是相同的概念正在另一个选择标签和相同的html页面中工作。以下是代码。选择的AngularJS ngModel指令

<select ng-model="selectedFont" 
      ng-options="font.title for font in fonts" 
      ng-change="onFontChange()"> 
    </select>

onFontChange()功能被放置在控制器中。

任何帮助是非常可观的...在此先感谢。

亲密分享完整代码或分享jsfiddle演示 – 2013-04-29 06:30:44

我不知道如何使用jsfiddle – 2013-04-29 06:45:14

你可以发布'onFontChange（）'代码吗？ – 2013-04-29 06:50:36

答

基于托尼小马的小提琴：

<div ng-app ng-controller="MyCtrl"> 
    <select ng-model="opt" 
      ng-options="font.title for font in fonts" 
      ng-change="change(opt)"> 
    </select> 

    <p>{{opt}}</p> 
</div>

与控制器：

function MyCtrl($scope) { 
    $scope.fonts = [ 
     {title: "Arial" , text: 'Url for Arial' }, 
     {title: "Helvetica" , text: 'Url for Helvetica' } 
    ]; 
    $scope.change= function(option){ 
     alert(option.title); 
    } 
}

http://jsfiddle.net/basarat/3y5Pw/43/

希望我能对此赞赏两次。 – Skitterm 2014-09-17 22:17:20

您也可以使用'$ scope。$ watch（）'来表示：http://stackoverflow.com/questions/15727219/how-can-i-detect-when-a-user-changes-the-value- IN-A-选择 - 下拉 - 使用 - angul – Caumons 2015-06-18 16:19:55

答

首先创建数据（可以是本地或服务器）的控制器。并初始化默认值，这会强制在HTML表单中选择默认项目。

// supported languages 
$scope.languages = ['ENGLISH', 'SPANISH', 'RUSSIAN', 'HINDI', 'NEPALI']; 
// init default language 
$scope.language = 'ENGLISH';

现在，在你的HTML表单

<select class="form-control" ng-model="language"> 
    <option ng-repeat="language in languages">{{language}}</option> 
</select>

的截图是在这里（注意引导CSS的使用和这里不包括在内）。

enter image description here

你可以在控制器测试，更改是否工作

$scope.$watch('language', function (newVal, oldVal) { 
    console.log(oldVal + " -> " + newVal); 
});

英文 - >俄罗斯

俄语 - >西班牙语

西班牙语 - >俄语

希望这会对您有所帮助。谢谢！

选择的AngularJS ngModel指令

相关推荐