6

シンプルなユーザー登録フォームで angular-ui-select を使用しています:

<ui-select ng-model="user.countryCode" convert-to-string theme="selectize" class="dropdown">
    <ui-select-match placeholder="{{::strings('userDetails.countryPlaceholder')}}">{{$select.selected.name}}
    </ui-select-match>
    <ui-select-choices repeat="country in countries">
        <span ng-bind-html="country.name | highlight: $select.search"></span>
    </ui-select-choices>
</ui-select>

ここに私の国の配列定義があります:

$scope.countries = [
            {name: 'Afghanistan', code: 'AF'},
            {name: 'Albania', code: 'AL'},
            {name: 'Australia', code: 'AU'},
            {name: 'Austria', code: 'AT'},
            {name: 'Azerbaijan', code: 'AZ'},
            {name: 'Belarus', code: 'BY'},
            {name: 'Belgium', code: 'BE'},
            {name: 'Belize', code: 'BZ'},
            {name: 'Benin', code: 'BJ'}
];

私はhtmlでユーザーオブジェクトを作成しています。すべてのフィールドには、ユーザーのプロパティにバインドされたng-modelがありました。firstName などの単純な入力を使用している場合は、簡単です。

<input class="form-control" type="text" name="firstName" ng-model="user.firstName"/>

しかし、ドロップダウンでは、国名をドロップダウンリストオプションに表示し、そのコードをユーザーオブジェクトに配置したいと考えています。このためにコントローラーにコードを書くことは避けたいです。(すなわち $scope.user.countryCode = $scope.country.selected.code; )

4

3 に答える 3

15

私はあなたができると思います：

<ui-select-choices repeat="country.code as country in countries">
    <span ng-bind-html="country.name | highlight: $select.search"></span>
</ui-select-choices>

ドキュメントから: https://github.com/angular-ui/ui-select/wiki/ui-select-choices

例: 単一のプロパティのバインド

ui-select-choices の繰り返しで、バインド先のプロパティを識別します。repeat="item.id as item in cards">.

于 2015-06-23T16:27:05.077 に答える
0

カスタムフィルターを使用して、オブジェクトを「透過的に」配列に変換できます。

https://code.angularjs.org/1.4.7/docs/error/filter/notarray

https://github.com/petebacondarwin/angular-toArrayFilter

于 2015-10-30T14:24:25.677 に答える