AngularJS - Chọn giá trị trả về "? Số: x?" từ phạm vi biến

Question

Đang cố gắng để có được giá trị ban đầu cho một yếu tố lựa chọn và thay vì Populating giá trị, nó sẽ thêm một chuỗi kỳ lạ như thể hiện trong hình ảnh này:

Đây là đoạn mã JavaScript:

function appCtrl($scope){ 
     $scope.teams = [ 
      {teamId: 10, teamName: 'Foo'}, 
      {teamId: 20, teamName: 'Bar'}, 
      {teamId: 30, teamName: 'Steve'}, 
      {teamId: 40, teamName: 'Jobs'}, 
      {teamId: 50, teamName: 'Macs'} 
     ]; 

     $scope.filters = { 
      teamIdSelected: 20 
     }; 
    } 

Dưới đây là HTML:

<div ng-app ng-controller="appCtrl"> 
    <select class="small" ng-model="filters.teamIdSelected"> 
     <option ng-repeat="team in teams" value="{{team.teamId}}">{{team.teamName}}</option> 
    </select> 

Đây là một jsbin để chứng minh: http://jsbin.com/EKOpAFI/1/edit

Tôi cũng đã cố gắng sử dụng cực kỳ kém tài liệu chọn yếu tố here nhưng tôi không thể làm cho nó làm việc theo cách mà một trong hai nơi teamId của tôi là giá trị và teamName là nhãn . Nó luôn muốn đặt chỉ mục của mảng làm giá trị.

Mọi trợ giúp sẽ được đánh giá cao.

Answer 1

select chỉ thị là thực sự là một chút khó khăn để grok. Dưới đây là cách thức hoạt động kết hợp với ng-options chỉ thị (đó là phân tích rất mạnh!)

<select 
    ng-model="filters.teamIdSelected" 
    ng-options="value.teamId as value.teamName for (key, value) in teams" 
    ></select> 

Đừng nhầm lẫn với các giá trị được tạo ra trong DOM khi kiểm tra các tùy chọn Lựa chọn công cụ dev. Thuộc tính value luôn nhận được chỉ mục của nó. Các cặp giá trị khóa tương ứng vẫn được đánh giá dựa trên phạm vi, vì vậy tất cả những gì bạn cần là cập nhật ´ng-model`.

Hy vọng điều này sẽ hữu ích!

Answer 2

Đây là những gì bạn muốn:

<select class="small" ng-model="filters.teamIdSelected" 
    ng-options="t.teamId as t.teamName for t in teams"> 
</select> 

Dont sử dụng ng-repeat với <option> s.

Answer 3

tôi khuyên bạn nên sử dụng ng-tùy chọn trên yếu tố lựa chọn thay vào đó, như vậy:

<select class="small" ng-model="filters.teamIdSelected" ng-options="team.teamId as team.teamName for team in teams"></select> 

Ngoài ra, nếu bạn muốn bao gồm một "Chọn Team" tùy chọn:

<select class="small" ng-model="filters.teamIdSelected" ng-options="team.teamId as team.teamName for team in teams"> 
    <option value="">Select Team</options>  
</select>