ng-optionを使用してselect要素のデフォルト値を設定する方法

Angular selectディレクティブのドキュメントは、http：//docs.angularjs.org/api/ng.directive：selectで確認しました。デフォルト値の設定方法がわかりません。これは紛らわしいです：

配列の値のラベルとして選択

ここにオブジェクトがあります：

{
    "type": "select", 
    "name": "Service",
    "value": "Service 3", 
    "values": [ "Service 1", "Service 2", "Service 3", "Service 4"] 
}

html（動作中）：

<select><option ng-repeat="value in prop.values">{{value}}</option></select>

次に、select要素内にng-option属性を追加しprop.valueて、デフォルトオプションとして設定しようとしています（機能していません）。

ng-options="(prop.value) for v in prop.values"

何が悪いのですか？

したがって、オブジェクトがスコープ内にあると想定します。

<div ng-controller="MyCtrl">
  <select ng-model="prop.value" ng-options="v for v in prop.values">
  </select>
</div>

function MyCtrl($scope) {
  $scope.prop = {
    "type": "select", 
    "name": "Service",
    "value": "Service 3", 
    "values": [ "Service 1", "Service 2", "Service 3", "Service 4"] 
  };
}

働くPlunkr：http ://plnkr.co/edit/wTRXZYEPrZJRizEltQ2g

選択のための角度のドキュメント *は、明示的にこの質問に答えていないが、それはそこにあります。を見るとscript.js、次のことがわかります。

function MyCntrl($scope) {
  $scope.colors = [
    {name:'black', shade:'dark'},
    {name:'white', shade:'light'},
    {name:'red', shade:'dark'},
    {name:'blue', shade:'dark'},
    {name:'yellow', shade:'light'}
  ];
  $scope.color = $scope.colors[2]; // Default the color to red
}

これはhtmlです：

<select ng-model="color" ng-options="c.name for c in colors"></select>

これは<select>withで選択された値をデフォルトにするより明白な方法のようですng-options。また、ラベル/値が異なる場合にも機能します。

* これはAngular 1.2.7からのものです

この回答は、DBからデータを取り込み、変更を加えた後、変更を永続化する場合により役立ちます。

 <select  ng-options="opt.id as opt.name for opt in users" ng-model="selectedUser"></select>

ここで例を確認してください：

http://plnkr.co/edit/HrT5vUMJOtP9esGngbIV

<select name='partyid' id="partyid" class='span3'>
<option value=''>Select Party</option>
<option ng-repeat="item in partyName" value="{{item._id}}" ng-selected="obj.partyname == item.partyname">{{item.partyname}}
</option>
</select>

オブジェクトの配列が次のように複雑な場合：

$scope.friends = [{ name: John , uuid: 1234}, {name: Joe, uuid, 5678}];

そしてあなたの現在のモデルは次のようなものに設定されました：

$scope.user.friend = {name:John, uuid: 1234};

track byng-model = "user.friend"にもuuidがある限り、uuid（または一意のフィールド）で関数を使用するのに役立ちました。

<select ng-model="user.friend" 
ng-options="friend as friend.name for friend in friends track by friend.uuid"> 
</select>

私はこれに数時間苦労したので、いくつかの説明を付け加えたいと思います。ここに記載されているすべての例は、サービスやデータベースからではなく、スクリプト自体からデータが読み込まれる場合を示しています。だから私と同じ問題を抱えている人に私の経験を提供したいと思います。

通常は、目的のオプションのIDのみをデータベースに保存するので、それを表示しましょう

service.js

myApp.factory('Models', function($http) {
var models = {};
models.allModels = function(options) {
    return $http.post(url_service, {options: options});
};

return models;
});

controller.js

myApp.controller('exampleController', function($scope, Models) {
$scope.mainObj={id_main: 1, id_model: 101};
$scope.selected_model = $scope.mainObj.id_model;
Models.allModels({}).success(function(data) {
    $scope.models = data; 
});
});

最後に、部分的なhtml model.html

Model: <select ng-model="selected_model" 
ng-options="model.id_model as model.name for model in models" ></select>

基本的に私は一枚「というポイントに望んでいたモデルでモデルのmodel.nameとしてmodel.id_model」「model.id_modelは、あなたが」と一致させることができますように、「値のためのモデルのIDを使用していますmainObj.id_modelもあります」 「selected_model」、これは単なる値です。「as model.name」はリピーターのラベルです。最後に、「model in models」は、私たちが知っている通常のサイクルです。

これが誰かを助けることを願っています、そしてそれが役立つ場合は投票してください：D

<select id="itemDescFormId" name="itemDescFormId" size="1" ng-model="prop" ng-change="update()">
    <option value="">English(EN)</option>
    <option value="23">Corsican(CO)</option>
    <option value="43">French(FR)</option>
    <option value="16">German(GR)</option>

空の値を持つオプションを追加するだけです。それが動作します。

デモプランカー

それを行う簡単な方法は、 data-ng-init。

<select data-ng-init="somethingHere = options[0]" data-ng-model="somethingHere" data-ng-options="option.name for option in options"></select>

ここでの主な違いは、含める必要があるということです data-ng-model

NG-モデルの属性が選択されたオプションを設定しても、あなたはパイプにのようなフィルタできますORDERBY：orderModel.valueを

index.html

<select ng-model="orderModel" ng-options="option.name for option in orderOptions"></select>

controllers.js

$scope.orderOptions = [
    {"name":"Newest","value":"age"},
    {"name":"Alphabetical","value":"name"}
];

$scope.orderModel = $scope.orderOptions[0];

Chrome、IE 10/11、Firefoxのページに時々データが入力されないデフォルト値が実行されている場合は、この属性を入力/選択フィールドに追加して、HTMLの入力された変数をチェックします。

<input data-ng-model="vm.x" data-ng-if="vm.x !== '' && vm.x !== undefined && vm.x !== null" />

数値IDを使用してオプションのインデックスを作成する必要がない場合は、本当に簡単です。

1. $ scope var-people配列を宣言します

   $scope.people= ["", "YOU", "ME"];

2. 上記のスコープのDOMで、オブジェクトを作成します

   <select ng-model="hired" ng-options = "who for who in people"></select>

3. コントローラーで、ngモデルを「採用」に設定します。

   $scope.hired = "ME";

幸運を！！！とても簡単です！

足し算するために、私はこのようなことをしました。

 <select class="form-control" data-ng-model="itemSelect" ng-change="selectedTemplate(itemSelect)" autofocus>
        <option value="undefined" [selected]="itemSelect.Name == undefined" disabled="disabled">Select template...</option>
        <option ng-repeat="itemSelect in templateLists" value="{{itemSelect.ID}}">{{itemSelect.Name}}</option></select>