web-dev-qa-db-ja.com

Angularjsは選択オプションにjsonを入力します

基本的なjson配列からの値をselectオプションに入力しようとしています。

私が持っている例は国の選択です。各国には、id要素と名前に加えて、無視できる他のフィールドがあります。基本的に、1つの値をvalue=""フィールドに入れ、別の値を<option>tags</option>の間に入れます。

htmlスニペット

<div ng-controller="DemoCtrl">

  <p>populate select options with ajax</p>

    <select id="Country" name="Country" class="form-control" size="10" 
        ng-model ="chooseCountries">                                
            <option ng:repeat="country in chooseCountries" value="{{country.id}}">     
                {{country.name}}
            </option>
    </select>

</div>

javascriptスニペット

'use strict';

function DemoSelectCtrl($scope) {

    $scope.chooseCountries=[
        {countryId : 1, name : "France - Mainland", desc: "some description" },
        {countryId : 3, name : "Gibraltar", desc: "some description"},
        {countryId : 3, name : "Malta", desc: "some description"}
    ];  

});

ここにまとめましたjs fiddle..何かが足りないと思います

javascriptjsonangularjsselectpopulate
4
Robbo_UK
  1. angular.module('ui.bootstrap.demo', ['ui.bootstrap'])- ui.bootstrapがあることを確認してください。インストール方法を読む http://angular-ui.github.io/bootstrap/
  2. これが更新されたjsfiddleです http://jsfiddle.net/e31k5e6L/1/
3
user2700840

value属性の入力を間違えたため、country.countryIdに変更してください。

また、ng-modelディレクティブを、オブジェクト全体ではなく、単一のcountryId値（または国IDの配列）に設定します。

<select id="Country" name="Country" ng-model ="selectedValue"> 
    <option ng:repeat="country in chooseCountries" value="{{country.countryId}}">
        ...

JS：

function DemoSelectCtrl($scope) {

    $scope.selectedValue = 1;    

    $scope.chooseCountries=[
        {countryId : 1, name : "France - Mainland", desc: "some description" },
        {countryId : 3, name : "Gibraltar", desc: "some description"},
        {countryId : 3, name : "Malta", desc: "some description"}
    ];  

});
2
Muhammad Reda

上記の例では、value属性が欠落しています。これを変更してくださいvalue="{{country.countryId}}"。これを試して

<select id="Country" name="Country" class="form-control" size="10" ng-model ="chooseCountries">                                
    <option ng:repeat="country in chooseCountries" value="{{country.countryId}}">
        {{country.name}}
    </option>
</select>

例を参照してください ここをクリック

2
vamsikrishnamannem

標準のselect（ angular-ui-select も使用できます）にオブジェクトを設定する最良の方法は、「ng-options」ディレクティブと「trackbyid」を使用した「ng-repeat」を使用することです（ AngularJS docを参照 ）、これはng-modelでうまく機能します。これはそれを使用する方法の例です：

<select id="select_field" name="select_field"
   ng-model="vm.selectedCountry"
   ng-options="country as country.name for country in vm.chooseCountries track by country.countryId">
   <option value="">-- Select Country --</option>
</select>

「vm」はコントローラーで定義された「controllerAs」の場合であると言わなければなりません。$ scopeを直接使用すると、「vm」を削除できます。

これは、選択フィールドに入力するために私が見つけた最良の方法です。

0
hermeslm