ng-option을 사용하여 선택 요소의 기본값을 설정하는 방법

ng-option을 사용하여 선택 요소의 기본값을 설정하는 방법

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:

select*의 각도 설명서는 이 질문에 명확하게 답하지 않지만 여기에 기재되어 있습니다.예를 들어,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>와 함께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만 데이터베이스에 저장하므로...보여줍시다

서비스.js

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

return models;
});

controller.controller.controllers

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 as model.name as models in models"라는 조각을 가리키고 싶습니다. "model.id_model"은 모델의 ID를 값으로 사용하여 "selected_model"이기도 한 "mainObj.id_model"과 매칭할 수 있습니다.이것은 단순한 값입니다.또한 "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>

빈 값을 사용하여 옵션을 추가합니다.그건 작동할 것이다.

데모 프로그램

보다 쉬운 방법은 다음과 같이 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-model 속성은 선택한 옵션을 설정하고 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 모델의 "hired"를 설정합니다.

   $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>

언급URL : https://stackoverflow.com/questions/17329495/how-to-use-ng-option-to-set-default-value-of-select-element