[javascript] AngularJS 및 ng-repeat를 사용하여 선택 초기화

Program / 글쓴이

AngularJS 1.1.5에서 ng-repeat를 사용하여 미리 채워진 옵션으로 시작하기 위해 선택 상자를 얻으려고합니다. 대신 선택은 항상 선택된 항목으로 시작합니다. 또한 빈 옵션이 있으며 원하지 않습니다. 나는 아무것도 선택되지 않은 부작용이 있다고 생각합니다.

ng-repeat 대신 ng-options를 사용 하여이 작업을 수행 할 수 있지만이 경우에는 ng-repeat를 사용하고 싶습니다. 내 좁혀진 예제는 그것을 보여주지 않지만 각 옵션의 제목 속성을 설정하고 싶습니다. 내가 아는 한 ng-options를 사용하여 그렇게 할 수있는 방법이 없습니다.

나는 이것이 일반적인 AngularJs 범위 / 프로토 타입 상속 문제와 관련이 있다고 생각하지 않습니다. Batarang에서 검사 할 때 적어도 분명한 것이 보이지 않습니다. 또한 UI를 사용하여 선택 항목에서 옵션을 선택하면 모델이 올바르게 업데이트됩니다.

HTML은 다음과 같습니다.

<body ng-app ng-controller="AppCtrl">
    <div>
        Operator is: {{filterCondition.operator}}
    </div>
    <select ng-model="filterCondition.operator">
       <option 
           ng-repeat="operator in operators" 
           value="{{operator.value}}"
       >
           {{operator.displayName}}
       </option>
    </select>
</body>

그리고 자바 스크립트 :

function AppCtrl($scope) {

    $scope.filterCondition={
        operator: 'eq'
    }

    $scope.operators = [
        {value: 'eq', displayName: 'equals'},
        {value: 'neq', displayName: 'not equal'}
     ]
}

이것에 대한 JS 피들 : http://jsfiddle.net/coverbeck/FxM3B/2/

답변

확인. 올바른 방법을 사용하지 않으려면 지시문에 대해 사전 선택 작업을 수행하기 위해 조건 확인 논리와 함께 속성을 ng-options추가 할 수 있습니다 .ng-selectedoption

<select ng-model="filterCondition.operator">
    <option ng-selected="{{operator.value == filterCondition.operator}}"
            ng-repeat="operator in operators"
            value="{{operator.value}}">
      {{operator.displayName}}
    </option>
</select>

Working Demo

답변

select 태그의 경우 angular는 ng-options 지시문을 제공합니다. 옵션을 설정하고 기본값을 설정하는 특정 프레임 워크를 제공합니다. 예상대로 작동하는 ng-options를 사용하여 업데이트 된 바이올린은 다음과 같습니다. http://jsfiddle.net/FxM3B/4/

업데이트 된 HTML (코드는 동일하게 유지됨) 

<body ng-app ng-controller="AppCtrl">
<div>Operator is: {{filterCondition.operator}}</div>
<select ng-model="filterCondition.operator" ng-options="operator.value as operator.displayName for operator in operators">
</select>
</body>

답변

선택된 옵션을 지적 해 주신 TheSharpieOne 에게 감사합니다 . 그것이 주석이 아닌 답변으로 게시 된 경우, 나는 그 정답을 만들 것입니다.

작동하는 JSFiddle은 다음과 같습니다. http://jsfiddle.net/coverbeck/FxM3B/5/ .

또한 문제의 원인이 아니기 때문에 원래 게시물에서 생략 한 title 속성을 사용하도록 바이올린을 업데이트했습니다 (그러나 ng-options 대신 ng-repeat를 사용하려는 이유입니다) .

HTML :

<body ng-app ng-controller="AppCtrl">
<div>Operator is: {{filterCondition.operator}}</div>
<select ng-model="filterCondition.operator">
   <option ng-repeat="operator in operators" title="{{operator.title}}" ng-selected="{{operator.value == filterCondition.operator}}" value="{{operator.value}}">{{operator.displayName}}</option>
</select>
</body>

JS :

function AppCtrl($scope) {

    $scope.filterCondition={
        operator: 'eq'
    }

    $scope.operators = [
        {value: 'eq', displayName: 'equals', title: 'The equals operator does blah, blah'},
        {value: 'neq', displayName: 'not equal', title: 'The not equals operator does yada yada'}
     ]
}

답변

앵귤러가 선택에 빈 옵션 요소를 주입한다는 사실은 기본적으로 바인딩 된 모델 객체가 초기화 될 때 빈 값으로 제공된다는 것입니다.

기본 옵션을 선택하려면 컨트롤러의 범위에서 설정할 수 있습니다. 

$scope.filterCondition.operator = "your value here";

빈 옵션 자리 표시자를 원하면 이것이 효과적입니다.

<select ng-model="filterCondition.operator" ng-options="operator.id as operator.name for operator in operators">
  <option value="">Choose Operator</option>
</select>

답변

제안한대로 ng-options를 사용해야하며 불행히도 배열이 문자열 배열이 아닌 한 배열 요소를 기본값으로 참조해야한다고 생각합니다.

http://jsfiddle.net/FxM3B/3/

자바 스크립트 :

function AppCtrl($scope) {


    $scope.operators = [
        {value: 'eq', displayName: 'equals'},
        {value: 'neq', displayName: 'not equal'}
     ]

    $scope.filterCondition={
        operator: $scope.operators[0]
    }
}

HTML :

<body ng-app ng-controller="AppCtrl">
<div>Operator is: {{filterCondition.operator.value}}</div>
<select ng-model="filterCondition.operator" ng-options="operator.displayName for operator in operators">
</select>
</body>

답변

각도 재료에서 md-select 및 ng-repeating md-option ng-model-options="{trackBy: '$value.id'}"을 사용하는 경우이 펜에 표시된 md-select 태그 애쉬에 추가 할 수 있습니다

암호:

<md-select ng-model="user" style="min-width: 200px;" ng-model-options="{trackBy: '$value.id'}">
  <md-select-label>{{ user ? user.name : 'Assign to user' }}</md-select-label>
  <md-option ng-value="user" ng-repeat="user in users">{{user.name}}</md-option>
</md-select>

스 니펫 확장

답변