Khởi tạo lựa chọn với AngularJS và ng-repeat

127

Tôi đang cố gắng để có được hộp chọn để bắt đầu với một tùy chọn điền sẵn bằng cách sử dụng ng-lặp lại với AngularJS 1.1.5. Thay vào đó, lựa chọn luôn bắt đầu với không có gì được chọn. Nó cũng có một tùy chọn trống, mà tôi không muốn. Tôi nghĩ rằng có một tác dụng phụ không có gì được chọn.Khởi tạo lựa chọn với AngularJS và ng-repeat

Tôi có thể làm việc này bằng cách sử dụng ng-tùy chọn thay vì ng-lặp lại, nhưng tôi muốn sử dụng ng-lặp lại cho trường hợp này. Mặc dù ví dụ thu hẹp của tôi không hiển thị nó, tôi cũng muốn đặt thuộc tính tiêu đề của từng tùy chọn và không có cách nào để thực hiện điều đó bằng cách sử dụng tùy chọn ng, theo như tôi biết.

Tôi không nghĩ rằng điều này liên quan đến vấn đề thừa kế phạm vi/nguyên mẫu chung của AngularJs. Ít nhất tôi không thấy điều gì rõ ràng khi kiểm tra ở Batarang. Ngoài ra, khi bạn chọn một tùy chọn trong lựa chọn với giao diện người dùng, mô hình sẽ cập nhật chính xác.

Đây là HTML:

<body ng-app ng-controller="AppCtrl"> 
    <div> 
     Operator is: {{filterCondition.operator}} 
    </div> 
    <select ng-model="filterCondition.operator"> 
     <option 
      ng-repeat="operator in operators" 
      value="{{operator.value}}" 
     > 
      {{operator.displayName}} 
     </option> 
    </select> 
</body>

Và JavaScript:

function AppCtrl($scope) { 

    $scope.filterCondition={ 
     operator: 'eq' 
    } 

    $scope.operators = [ 
     {value: 'eq', displayName: 'equals'}, 
     {value: 'neq', displayName: 'not equal'} 
    ] 
}

JS Fiddle cho việc này: http://jsfiddle.net/coverbeck/FxM3B/2/

Nguồn

2013-09-05 Charles O.

ngOption đã được tạo ra bởi vì không có cách nào sạch để làm điều này với ngRepeat. ngRepeat unrolls sau khi tùy chọn đã được chọn. Bạn đã thử thiết lập ngSelect trên các tùy chọn của bạn – TheSharpieOne

Có! Các ngSelected làm việc! Tôi sẽ đăng một cập nhật JsFiddle. –

Cần lưu ý rằng trong AngualrJS 1.2 mã này hoạt động khác nhau - Nó không tạo ra một phần tử rỗng mới

215

OK. Nếu bạn không muốn sử dụng đúng cách ng-options, bạn có thể thêm thuộc tính ng-selected với logic kiểm tra điều kiện cho chỉ thị option để thực hiện công việc được chọn trước.

<select ng-model="filterCondition.operator"> 
    <option ng-selected="{{operator.value == filterCondition.operator}}" 
      ng-repeat="operator in operators" 
      value="{{operator.value}}"> 
     {{operator.displayName}} 
    </option> 
</select>

Working Demo

Nguồn

2013-09-06 05:26:34 zsong

OK, có vẻ như bạn đã trả lời câu hỏi của bạn như thế này ... – zsong

+37

Tôi sẽ cung cấp cho bạn tín dụng vì bạn đã tự mình tìm ra và đã làm ví dụ đầy đủ. Mặc dù tôi không đồng ý với nhận xét của bạn về tùy chọn ng là "cách chính xác". :) Tôi đã luôn luôn sử dụng ng-tùy chọn bản thân mình, nhưng điều này yêu cầu làm một cái gì đó mà ng-tùy chọn không hỗ trợ, nhỏ như nó được.Và tài liệu Angular nói bạn có thể dùng ng-lặp lại. Cảm ơn, Charles –

Cảm ơn, đó là cách dễ dàng để tắt một số tùy chọn. – Dorian

Theo đề nghị bạn cần phải sử dụng ng-lựa chọn và tiếc là tôi tin rằng bạn cần tham chiếu phần tử mảng cho một mặc định (trừ khi mảng là một mảng các chuỗi).

http://jsfiddle.net/FxM3B/3/

JavaScript:

function AppCtrl($scope) { 


    $scope.operators = [ 
     {value: 'eq', displayName: 'equals'}, 
     {value: 'neq', displayName: 'not equal'} 
    ] 

    $scope.filterCondition={ 
     operator: $scope.operators[0] 
    } 
}

HTML:

<body ng-app ng-controller="AppCtrl"> 
<div>Operator is: {{filterCondition.operator.value}}</div> 
<select ng-model="filterCondition.operator" ng-options="operator.displayName for operator in operators"> 
</select> 
</body>

Nguồn

2013-09-05 22:54:14 shaunhusain

Bạn có biết tại sao và bạn có chắc chắn không? Tài liệu (http://docs.angularjs.org/api/ng.directive:select) cho biết bạn chỉ cần sử dụng ng-options khi liên kết với một giá trị không phải chuỗi. Giống như tôi đã nói tôi muốn sử dụng thuộc tính title, và không có cách nào để làm điều đó với ng-options. Một cái gì đó như

Tôi tin rằng các lưu ý trong tài liệu là một chút không rõ ràng và thực sự có nghĩa là bạn sẽ phải sử dụng một chuỗi cho mô hình và có một mảng các chuỗi cho các tùy chọn. Nếu bạn không nhớ lý do cho việc sử dụng thuộc tính "title" là gì tôi không thấy nó trên W3C http://www.w3schools.com/tags/tag_option.asp và không thể nhớ lại việc sử dụng nó thực sự. Bạn không thể chỉ lưu trữ các mô tả trong các đối tượng sau đó vẫn lấy dữ liệu đó vì đó là những gì mô hình hiện nay bị ràng buộc? – shaunhusain

Trên trang W3C mà bạn đã liên kết, nếu bạn nhấp vào liên kết Thuộc tính tổng thể, bạn sẽ thấy thuộc tính tiêu đề được phần tử tùy chọn hỗ trợ. Tôi đang sử dụng thuộc tính tiêu đề chỉ để hiển thị văn bản "tooltip", để nếu bạn di chuột qua một tùy chọn, bạn có thể có mô tả lớn hơn về ý nghĩa của tùy chọn đó. Đó là một điều nhỏ, nhưng sẽ tốt hơn nếu có thể. –

Đối với thẻ chọn, góc cạnh cung cấp các chỉ ng-tùy chọn. Nó cung cấp cho bạn khung công tác cụ thể để thiết lập các tùy chọn và đặt mặc định. Đây là fiddle cập nhật sử dụng ng-tùy chọn mà làm việc như mong đợi: http://jsfiddle.net/FxM3B/4/

HTML Cập nhật (mã vẫn như cũ)

<body ng-app ng-controller="AppCtrl"> 
<div>Operator is: {{filterCondition.operator}}</div> 
<select ng-model="filterCondition.operator" ng-options="operator.value as operator.displayName for operator in operators"> 
</select> 
</body>

Nguồn

2013-09-05 22:57:18

Hi Jeremy - Tôi đang cố gắng làm điều này mà không có tùy chọn ng. Giống như tôi đã nói trong câu hỏi của tôi và trả lời Shaun, tôi muốn đặt thuộc tính tiêu đề trên mỗi tùy chọn, và tôi không thể làm điều đó với ng-tùy chọn, theo như tôi biết. Cảm ơn, Charles –

Nhờ TheSharpieOne để chỉ ra các tùy chọn ng-chọn. Nếu điều đó đã được đăng dưới dạng câu trả lời chứ không phải là nhận xét, tôi sẽ đưa ra câu trả lời đúng.

Đây là một JSFiddle đang hoạt động: http://jsfiddle.net/coverbeck/FxM3B/5/.

Tôi cũng đã cập nhật fiddle để sử dụng thuộc tính title, mà tôi đã bỏ qua trong bài đăng gốc, vì nó không phải là nguyên nhân của vấn đề (nhưng đó là lý do tôi muốn sử dụng ng-repeat thay vì ng-tùy chọn).

HTML:

<body ng-app ng-controller="AppCtrl"> 
<div>Operator is: {{filterCondition.operator}}</div> 
<select ng-model="filterCondition.operator"> 
    <option ng-repeat="operator in operators" title="{{operator.title}}" ng-selected="{{operator.value == filterCondition.operator}}" value="{{operator.value}}">{{operator.displayName}}</option> 
</select> 
</body>

JS:

function AppCtrl($scope) { 

    $scope.filterCondition={ 
     operator: 'eq' 
    } 

    $scope.operators = [ 
     {value: 'eq', displayName: 'equals', title: 'The equals operator does blah, blah'}, 
     {value: 'neq', displayName: 'not equal', title: 'The not equals operator does yada yada'} 
    ] 
}

Nguồn

2013-09-05 23:56:16

Xin lỗi về việc đăng bài dưới dạng nhận xét. Tôi không cảm thấy thích làm ví dụ và tôi không chắc chắn 100% nó sẽ hoạt động. Nó chỉ là một linh cảm. – TheSharpieOne

Thực tế là góc được tiêm một yếu tố lựa chọn sản phẩm nào để chọn là đối tượng mô hình binded đến nó bằng cách mặc định đi kèm với một giá trị rỗng trong khi khởi tạo.

Nếu bạn muốn chọn một tùy chọn mặc định thì có thể bạn có thể có thể thiết lập nó trên phạm vi trong bộ điều khiển

$scope.filterCondition.operator = "your value here";

Nếu bạn muốn một tùy chọn placeholder trống, điều này làm việc cho tôi

<select ng-model="filterCondition.operator" ng-options="operator.id as operator.name for operator in operators"> 
    <option value="">Choose Operator</option> 
</select>

Nguồn

2015-02-10 06:49:26 Ammadu

Điều này là tốt, nhưng Angular tạo ra một tùy chọn trống. Làm thế nào để tránh điều này? – MarceloBarbosa

Nếu bạn đang sử dụng tùy chọn md-select và ng-repeat ing md từ vật liệu góc thì bạn có thể thêm ng-model-options="{trackBy: '$value.id'}" vào tro thẻ md-chọn được hiển thị trong this pen

Code:

<md-select ng-model="user" style="min-width: 200px;" ng-model-options="{trackBy: '$value.id'}"> 
 
    <md-select-label>{{ user ? user.name : 'Assign to user' }}</md-select-label> 
 
    <md-option ng-value="user" ng-repeat="user in users">{{user.name}}</md-option> 
 
</md-select>

Nguồn

2016-07-28 14:49:26

Khởi tạo lựa chọn với AngularJS và ng-repeat

Trả lời

Các vấn đề liên quan