object：1などの代わりにselectオプションで文字列値を取得する方法

Question

実際の文字列で角度を設定する方法を教えてください。 私が代わりにこの

<option label="New York City" value="object:3">New York City</option> 

私のコードのこの

<option label="New York City" value="New York City">New York City</option> 

を取得したい：

<div ng-controller="CountryCntrl"> 
    <div> 
     City: <br> 
     <select id="country" ng-model="states" ng-options="country for (country, states) in countries" required> 
     <option value=''>Select</option> 
     </select> 
    </div> 
    <br> 

    <div> 
     SubArea:<br> 
     <select id="state" ng-disabled="!states" ng-model="cities" ng-options="state for (state,city) in states" required> 
     <option value=''>Select</option></select> 
    </div> 
    <br> 

    <div> 
     SpecLoc:<br> 
     <select id="city" ng-disabled="!cities || !states" ng-model="city"> 
     <option value=''>Select</option> 
     <option ng-repeat="city in cities" value='{{city}}'>{{city}}</option></select>   
    </div> 
</div> 

そしてここでは、スコープの配列です。間違った名前（国/都市）は無視してください。その一例

$scope.countries = { 
        'New York City': { 
         'manhattan': ['Battery Park','Chelsea','Chinatown/Lit Italy','Downtown','East Harlem','East Village','Financial District','Flatiron','Gramercy','Greenwich Village','Harlem/Morningside','Inwood/Wash Hts','Lower East Side','Midtown','Midtown East','Midtown West','Murray Hill','Nolita/Bowery','SoHo','TriBeCa','Union Square','Upper East Side','Upper West Side','West Village'], 
         'brooklyn': [], 
         'queens': [], 
         'bronx': [], 
         'staten island': [], 
         'new jersey': [], 
         'long island': [], 
         'westchester': [], 
         'fairfield co': [], 
         'fairfield co, CT': [] 
        }, 
        'Chicago': { 
         'city of chicago': [], 
         'north chicagoland': [], 
         'west chicagoland': [], 
         'south chicagoland': [], 
         'northwest indiana': [], 
         'northwest suburbs': [] 
        }, 
        'Washington': { 
         'district of columbia': [], 
         'northern virginia': [], 
         'maryland': [] 

        } 
       }; 
    } 
]); 

Answer 1

であなたのオプションの値を設定することができ、と言った、私は解決策を見つけました。 オプションの値に値を反映させたいだけで、単に追加するオブジェクトではない場合は、かなり簡単です。track by。

<select id="country" ng-model="states" ng-options="country for (country, states) in countries track by country" required> 
<option value=''>Select</option> 
</select> 

そして、あなたが代わりにこの

<option label="New York City" value="object:3">New York City</option> 

Answer 2

私はあなたのcountriesオブジェクトがJSONであり、それはあなたがcitieの名前を保存valueフィールドを持っていることをasumeます。私は読書をたくさんやった後は、あなたがこの<option value="{{country.value}}"></option>

<div> 
    City: <br> 
    <select id="country" ng-model="states" ng-options="country for (country, states) in countries" required> 
     <option value='{{country.value}}'>Select</option> 
    </select> 
</div> 

Answer 3

あなたは完全に罰金作品を提供したコードのこの

<option label="New York City" value="New York City">New York City</option> 

を取得します。 値= "オブジェクト：3"のオプションタグの値の問題を提起しましたが、それはselectの内部インデックスの一種です。そのため、もう一方がうまく作業を選択します。 （オブジェクトを変更せずに）

ワーキングコード：

https://jsfiddle.net/Kai_Draord/98dfLp4p/5/

この方法は本当にクールで、シーケンシャルな選択を作成するための簡単な方法です。とにかくあなたの問題に戻ります。入力がvalue = "New York"のように見えたので、私はこれを試みました。しかし、私は見ることができますが、これはオブジェクトの内部インデックスを失ってしまい、最初の選択だけでうまく動作しますが、もう1つは文字列を個々の文字に分割することを選択します。 NG-オプションについて

（値= "オブジェクト：3"）：NG-オプションについて

<select id="country" ng-model="states" ng-options="country for (country, states) in countries" required> 

（値= "ニューヨーク"）：

<select id="country" ng-model="states" ng-options="country as country for (country, states) in countries" required> 

で上記の国の例の国は、国の値として値とラベルを設定します。以下の例に見られるように。

だから、次のとおりです。

ng-options="value as label for (key, value) in object" 

Atempt（オブジェクトを変更せずに）を値を設定する：

https://jsfiddle.net/Kai_Draord/98dfLp4p/6/

最終解決： したい理由選択すると、その値がカウントの実際の値を必要としている必要があることが示されますry（すなわち、 "Object：3"の代わりに "New York"を入力してください。次に示すように、メインオブジェクトの構造を変更する必要があります。

$scope.countries = [{ 
        'state': 'New York City', 
        'cities': [{'city': 'manhattan', 'districts': ['Battery Park','Chelsea','Chinatown/Lit Italy','Downtown','East Harlem','East Village','Financial District','Flatiron','Gramercy','Greenwich Village','Harlem/Morningside','Inwood/Wash Hts','Lower East Side','Midtown','Midtown East','Midtown West','Murray Hill','Nolita/Bowery','SoHo','TriBeCa','Union Square','Upper East Side','Upper West Side','West Village']} 
        ,{'city': 'brooklyn', 'districts': []} 
        ,{'city': 'queens', 'districts': []} 
        ,{'city': 'bronx', 'districts': []} 
        ,{'city': 'staten island', 'districts': []} 
        ,{'city': 'new jersey', 'districts': []} 
        ,{'city': 'long island', 'districts': []} 
        ,{'city': 'westchester', 'districts': []} 
        ,{'city': 'fairfield co', 'districts': []} 
        ,{'city': 'fairfield co, CT', 'districts': []}] 
        },{ 
        'state': 'Chicago', 
        'cities': [{'city': 'city of chicago', 'districts': []} 
        ,{'city': 'north chicagoland', 'districts': []} 
        ,{'city': 'west chicagoland', 'districts': []} 
        ,{'city': 'south chicagoland', 'districts': []} 
        ,{'city': 'northwest indiana', 'districts': []} 
        ,{'city': 'northwest suburbs', 'districts': []}] 
        },{ 
        'state': 'Washington', 
        'cities': [{'city': 'district of columbia', 'districts': []} 
        ,{'city': 'northern virginia', 'districts': []} 
        ,{'city': 'maryland', 'districts': []}] 
        } 
       ]; 

はその後、我々は簡単に（$ scope.state、$ scope.city、$ scope.district）

angular.module('myApp', []); 
 
angular.module('myApp').controller('testCtrl', function($scope) { 
 
\t $scope.countries = [{ 
 
        'state': 'New York City', 
 
        'cities': [{'city': 'manhattan', 'districts': ['Battery Park','Chelsea','Chinatown/Lit Italy','Downtown','East Harlem','East Village','Financial District','Flatiron','Gramercy','Greenwich Village','Harlem/Morningside','Inwood/Wash Hts','Lower East Side','Midtown','Midtown East','Midtown West','Murray Hill','Nolita/Bowery','SoHo','TriBeCa','Union Square','Upper East Side','Upper West Side','West Village']} 
 
        ,{'city': 'brooklyn', 'districts': []} 
 
        ,{'city': 'queens', 'districts': []} 
 
        ,{'city': 'bronx', 'districts': []} 
 
        ,{'city': 'staten island', 'districts': []} 
 
        ,{'city': 'new jersey', 'districts': []} 
 
        ,{'city': 'long island', 'districts': []} 
 
        ,{'city': 'westchester', 'districts': []} 
 
        ,{'city': 'fairfield co', 'districts': []} 
 
        ,{'city': 'fairfield co, CT', 'districts': []}] 
 
        },{ 
 
        'state': 'Chicago', 
 
        'cities': [{'city': 'city of chicago', 'districts': []} 
 
        ,{'city': 'north chicagoland', 'districts': []} 
 
        ,{'city': 'west chicagoland', 'districts': []} 
 
        ,{'city': 'south chicagoland', 'districts': []} 
 
        ,{'city': 'northwest indiana', 'districts': []} 
 
        ,{'city': 'northwest suburbs', 'districts': []}] 
 
        },{ 
 
        'state': 'Washington', 
 
        'cities': [{'city': 'district of columbia', 'districts': []} 
 
        ,{'city': 'northern virginia', 'districts': []} 
 
        ,{'city': 'maryland', 'districts': []}] 
 
        } 
 
       ]; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="testCtrl"> 
 
    <div> 
 
     City: <br> 
 
     <select id="country" ng-model="states" ng-options="o.state for o in countries" required> 
 
     <option value=''>Select</option> 
 
     </select> 
 
    </div> 
 
    <br> 
 

 
    <div> 
 
     SubArea:<br> 
 
     <select id="state" ng-disabled="!states" ng-model="cities" ng-options="o.city for o in states.cities" required> 
 
     <option value=''>Select</option></select> 
 
    </div> 
 
    <br> 
 

 
    <div> 
 
     SpecLoc:<br> 
 
     <select id="city" ng-disabled="!cities || !states" ng-model="district"> 
 
     <option value=''>Select</option> 
 
     <option ng-repeat="city in cities.districts" value='{{city}}'>{{city}}</option></select>   
 
    </div> 
 

 
{{states.state}} 
 

 
{{cities.city}} 
 

 
{{district}} 
 
</div>

にアクセスすることにより、個々の状態の都市や国にアクセスすることができます

これで問題が解決されることを願っています。