md-select는 선택한 값을 설정할 수 없습니다.

md-select는 선택한 값을 설정할 수 없습니다.

저는.md-select다음과 같이 설정합니다.

<md-select placeholder="Category" ng-model="current.Category" flex >
    <md-option ng-repeat="item in categories" ng-value="{{item}}">{{item.Name}}</md-option>
</md-select>

@scope.categories가치는

[  
{  
  "Name":"Commercial & Industrial",
  "ParentId":null,
  "Categories":[  
     {  
        "Name":"Deceptive Marketing",
        "ParentId":19,
        "Categories":[  

        ],
        "Id":24,
        "ModifiedDate":"2015-08-06T07:49:53.0489545",
        "CreatedDate":"2015-08-06T15:49:51.707"
     },
     {  
        "Name":"Aggressive Agents",
        "ParentId":19,
        "Categories":[  

        ],
        "Id":25,
        "ModifiedDate":"2015-08-06T07:50:10.0026497",
        "CreatedDate":"2015-08-06T15:50:08.63"
     }
  ],
  "Id":19,
  "ModifiedDate":"08/06/2015 @ 7:49AM",
  "CreatedDate":"08/06/2015 @ 3:49PM"
 },
 {  
  "Name":"Competitive Supply",
  "ParentId":null,
  "Categories":[  
     {  
        "Name":"Security Deposit",
        "ParentId":20,
        "Categories":[  

        ],
        "Id":21,
        "ModifiedDate":"2015-08-06T07:49:30.3966895",
        "CreatedDate":"2015-08-06T15:49:25.8"
     },
     {  
        "Name":"Meter",
        "ParentId":20,
        "Categories":[  

        ],
        "Id":22,
        "ModifiedDate":"2015-08-06T07:49:34.6571155",
        "CreatedDate":"2015-08-06T15:49:33.3"
     },
     {  
        "Name":"Bill",
        "ParentId":20,
        "Categories":[  

        ],
        "Id":23,
        "ModifiedDate":"2015-08-06T07:49:41.7268224",
        "CreatedDate":"2015-08-06T15:49:40.357"
     }
  ],
  "Id":20,
  "ModifiedDate":"08/06/2015 @ 7:49AM",
  "CreatedDate":"08/06/2015 @ 3:49PM"
   }
]

그md-select잘 통합니다.하지만 제가 알 수 없는 것은 select value를 설정하는 방법입니다.모델을 설정할 때current.Category의 값 중 하나로$scope.categories설정이 안 돼요.

설명서가 명시적이지는 않지만 다음을 사용해야 합니다.ng-selected. 설명할 코드펜을 만들었지만 기본적으로 다음과 같습니다.

<md-option ng-repeat="(index,item) in categories" ng-value="{{item}}"
           ng-selected="index == 1">    
    {{item.Name}}
</md-option>

그러면 두 번째 범주(범주 배열의 색인 1)가 선택됩니다.

ng-model-options를 사용하고 기준을 추적한 다음 선택기로 고유한 모델 필드를 선택해야 합니다.

<md-select placeholder="Category" 
    ng-model="current.Category" 
    ng-model-options="{trackBy: '$value.Id' }" // <-- unique field 'Id'
    flex >
    <md-option 
     ng-repeat="item in categories" 
     ng-value="{{item}}">{{item.Name}}</md-option>
</md-select>

이 솔루션은 Angular Material의 공식 문서에 설명되어 있습니다.

select의 기본값을 설정하려면 ng-selected 및 ng-model을 사용할 수 있습니다.

    <md-select ng-model="vmIdPage.number">
             <md-option ng-value="mod" ng-repeat="mod in vmIdPage.initObject.listeModaliteMisePlace" ng-selected="{{ mod.id === vmIdPage.number.id ? 'true' : 'false' }}">
                {{mod.libelle}}
             </md-option>
    </md-select> 

드롭다운에서 첫 번째 값을 기본값으로 설정하려는 경우 이 솔루션은 간단합니다.

사용.ng-select="$first". 이렇게 하면 드롭다운이 첫 번째 값으로 기본 설정됩니다.

<md-select placeholder="Categories" ng-model="current.category">
   <md-option ng-repeat="(index, item) in categories" value="{{item}}"
              ng-selected="$first">{{item.Name}}</md-option>
</md-select>

여기 시연할 코드펜이 있습니다.

나의 경우 추가하기ng-model-options="{trackBy: '$value.id'}"초기값이 설정되지 않아 문서에 설명된 대로 작동하지 않았습니다.

컨트롤러에서 원하는 기본값으로 모델을 명시적으로 설정하여 원하는 값을 적절하게 설정합니다.미리 선택한 것으로 표시할 요소의 인덱스를 모르는 경우(사용) 이 방법이 더 쉬울 수 있습니다.ng-selected). 물론 컨트롤러에서 평가할 수 있지만, 제가 보기에는 대상 요소를 모델에 직접 설정하는 것이 더 즉각적인 것 같습니다.

보기:

<div class="input-style-border">
   <md-select ng-model="vm.selectedGlobalFilter">
       <md-option ng-value="item" ng-repeat="item in vm.globalFilterValues">
            {{item.value}}
       </md-option>
   </md-select>
</div>

컨트롤러:

function initialize() {
        vm.globalFilterValues = globalFilterValues;
        vm.selectedGlobalFilter = TransferGlobalFilter.Worldwide;
    }

globalFilterValues가 다음과 같은 형태인 경우:

[
  {key:"All", value:"All values" },
  {key:"Manager", value:"Manager"},
  {key:"HR", value:"Human resources"},
]

ng-value 대신 ng-option에 value 사용

md-select 지시문의 문서에 명시된 것처럼 ng-model-options를 사용할 수 있습니다.

이 게시물 보기

언급URL : https://stackoverflow.com/questions/31881754/md-select-cant-set-selected-value