AngularJS ngModel chỉ thị trong lựa chọn

Question

Tôi đang làm việc trên một dự án angularjs và tôi có một vấn đề với ngModel không ràng buộc trong lựa chọn.Nhưng khái niệm tương tự đang làm việc trong một thẻ chọn và trong cùng một trang html. Dưới đây là mã.

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

onFontChange() chức năng được đặt trong bộ điều khiển.

Bất kỳ ai giúp đỡ đều được đánh giá cao ... Cảm ơn bạn trước.

Answer 1

Dựa trên Tony fiddle của Pony:

<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> 

Với một bộ điều khiển:

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/

Answer 2

Đầu tiên tạo ra dữ liệu (có thể là địa phương hoặc từ máy chủ) trong Controller. Và khởi tạo giá trị mặc định, sẽ buộc mục mặc định được chọn ở dạng HTML.

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

Bây giờ ở dạng HTML của bạn

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

---

Ảnh chụp màn hình là ở đây (lưu ý bootstrap CSS được sử dụng và không bao gồm ở đây).

---

Bạn có thể làm một thử nghiệm trong điều khiển, cho dù sự thay đổi đang làm việc

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

ENGLISH -> NGA

NGA -> SPANISH

SPANISH -> RUSSIAN

Hy vọng điều này hữu ích. Cảm ơn!