Angularjs를 사용하여 선택 드롭다운에서 기본값 설정

Angularjs를 사용하여 선택 드롭다운에서 기본값 설정

아래와 같은 목적이 있습니다.드롭다운으로 표시해야 합니다.

var list = [{id:4,name:"abc"},{id:600,name:"def"},{id:200,name:"xyz"}]

제 컨트롤러에는 값을 나타내는 변수가 있습니다.이 값은 배열에 있는 위의 세 항목 중에서 드롭다운에서 기본적으로 선택할 항목을 결정했습니다.

 $scope.object.setDefault = 600;

아래와 같이 드롭다운 양식 항목을 작성할 때:

<select ng-model="object.setDefault" ng-options="r.name for r in list">                 

저는 두 가지 문제에 직면해 있습니다.

1. 목록은 다음과 같이 생성됩니다.

   <option value="0">abc</option>
   <option value="1">def</option>
   <option value="2">xyz</option>
   

   대신에

   <option value="4">abc</option>
   <option value="600">def</option>
   <option value="200">xyz</option>
   

2. 기본적으로 선택된 옵션이 없습니다.ng-model="object.setDefault"

문제 1:

생성되는 HTML은 정상입니다.모든 종류의 객체를 선택을 위한 값으로 사용할 수 있는 것이 Angular의 특징이라고 합니다.Angular는 HTML 옵션 값과 ng-model의 값을 매핑합니다.이 질문에 대한 Umur의 의견도 참조하십시오.Angular에서 값 속성을 설정하려면 어떻게 해야 합니까?Jsang-options?

문제 2:

다음 ng 옵션을 사용하고 있는지 확인합니다.

<select ng-model="object.item" ng-options="item.id as item.name for item in list" />

컨트롤러에 기본값을 선택할 수 있도록 설정합니다.

object.item = 4

ng-options를 사용하여 선택 목록을 채울 경우 선택 목록에 표시되는 단일 값이 아니라 전체 개체를 선택된 값으로 사용합니다.그래서 당신의 경우에는, 당신이 그들을

$scope.object.setDefault = {
    id:600,
    name:"def"
};

아니면

$scope.object.setDefault = $scope.selectItems[1];

또한 $scope.object 값을 그냥 출력하는 것을 추천합니다.템플릿에 Default를 설정하여 선택 받은 내용을 확인합니다.

<pre>{{object.setDefault}}</pre>

보기에서

<select ng-model="boxmodel"><option ng-repeat="lst in list" value="{{lst.id}}">{{lst.name}}</option></select>

JS:

내부컨트롤러

 $scope.boxModel = 600;

다음 코드(track by)로 할 수 있습니다.

<select ng-model="modelName" ng-options="data.name for data in list track by data.id" ></select>

이것은 오래된 질문이고 당신은 이미 답을 얻었을지도 모릅니다.

내 plnkr은 기본 드롭다운 값을 선택하는 방법에 대해 설명합니다.기본적으로, 저는 드롭다운 값을 [테스트하기 어려운 코드화된] 반환해주는 서비스가 있습니다.기본적으로 값을 선택할 수 없었고 거의 하루를 보내고 마침내 설정했어야 한다는 것을 알게 되었습니다.$scope.proofGroupId = "47";대신에$scope.proofGroupId = 47;script.js 파일에 저장합니다.그것은 제 잘못이었고 저는 제가 문자열 "47" 대신 정수 47을 설정하고 있다는 것을 알아차리지 못했습니다.만약 누군가가 보고 싶어 할 경우를 대비해 plnkr을 그대로 보유하고 있습니다.이것이 누군가에게 도움이 되기를 바랍니다.

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

이렇게 하면 원하는 결과가 나올거야 친구 :) 건배

일부 시나리오, object.item이 로드되지 않거나 정의되지 않습니다.

eng-init 사용

<select ng-init="object.item=2" ng-model="object.item"
ng-options="item.id as item.name for item in list"

$scope.item = {
    "id": "3",
    "name": "ALL",
};

$scope.CategoryLst = [
    { id: '1', name: 'MD' },
    { id: '2', name: 'CRNA' },
    { id: '3', name: 'ALL' }];

<select ng-model="item.id" ng-selected="3" ng-options="i.id as i.name for i in CategoryLst"></select>

이름 값 쌍 바인딩 값을 드롭다운에 사용해야 합니다.자세한 내용은 코드 참조

function myCtrl($scope) {
     $scope.statusTaskList = [
        { name: 'Open', value: '1' },
        { name: 'In Progress', value: '2' },
        { name: 'Complete', value: '3' },
        { name: 'Deleted', value: '4' },
    ];
    $scope.atcStatusTasks = $scope.statusTaskList[0]; // 0 -> Open 
}

<select ng-model="atcStatusTasks" ng-options="s.name for s in statusTaskList"></select>

html로 도와드릴 수 있습니다.

<option value="">abc</option>

대신에

<option value="4">abc</option>

abc를 기본값으로 설정합니다.

언급URL : https://stackoverflow.com/questions/17815036/setting-default-value-in-select-drop-down-using-angularjs