[angularjs] ng-option을 사용하여 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"]
  };
}

플런저 작동 : 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> withng-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.id_model에서 모델의 모델에 대한 model.name으로model.id_model “이라는 부분을 가리키고 싶었습니다 . ” model.id_model “은 모델의 id를 값으로 사용하므로 ” mainObj.id_model ” ” selected_model “, 이는 일반 값일 뿐이며as model.name “은 리피터의 레이블이며 마지막으로 모델의모델 “은 우리 모두가 알고있는 규칙적인주기입니다.

이것이 누군가에게 도움이되기를 바랍니다. 그렇다면 투표하십시오 : 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>

빈 값으로 옵션을 추가하십시오. 작동합니다.

데모 Plnkr