어드민, Author at 리뷰나라

[javascript] AngularJS의 ng-options에서 value 속성을 어떻게 설정합니까?

여기에 나를 포함한 많은 사람들을 괴롭히는 것 같습니다.

ng-optionsAngularJS 에서 지시문을 사용하여 <select>태그 의 옵션을 채울 때 옵션 값을 설정하는 방법을 알 수 없습니다. 이것에 대한 문서는 실제로 명확하지 않습니다. 적어도 저와 같은 단순한 것입니다.

옵션에 대한 텍스트를 다음과 같이 쉽게 설정할 수 있습니다.

ng-options="select p.text for p in resultOptions"

resultOptions예를 들면 언제 입니까?

[
    {
        "value": 1,
        "text": "1st"
    },
    {
        "value": 2,
        "text": "2nd"
    }
]

옵션 값을 설정하는 것이 가장 간단한 것이어야하지만 지금까지는 얻지 못했습니다.

답변

ngOptions 참조

ngOptions (선택 사항) – { comprehension_expression=} – 다음 형식 중 하나입니다.

배열 데이터 소스의 경우 :
label for value in array
select as label for value in array
label group by group for value in array
select as label group by group for value in array track by trackexpr
오브젝트 데이터 소스의 경우 :
label for (key , value) in object
select as label for (key , value) in object
label group by group for (key, value) in object
select as label group by group for (key, value) in object

귀하의 경우에는

array = [{ "value": 1, "text": "1st" }, { "value": 2, "text": "2nd" }];

<select ng-options="obj.value as obj.text for obj in array"></select>

이 못생긴 것들을 기억하는 법

이 구문 양식을 기억하기 어려운 모든 사람들에게 나는 이것이 가장 쉬운 구문이 아니라는 데 동의합니다. 이 문법은 일종의 파이썬 목록 이해의 확장 버전이며 구문을 매우 쉽게 기억하는 데 도움이됩니다. 다음과 같습니다.

파이썬 코드 :

my_list = [x**2 for x in [1, 2, 3, 4, 5]]
> [1, 4, 9, 16, 25]

# Let people to be a list of person instances
my_list2 = [person.name for person in people]
> my_list2 = ['Alice', 'Bob']

이것은 실제로 위에 나열된 첫 번째 구문과 동일한 구문입니다. 그러나 <select>일반적으로 코드의 실제 값과 <select>요소 에 표시된 텍스트 (라벨)를 구별해야합니다 .

마찬가지로 person.id코드에는 필요 하지만 id사용자 에게 표시하고 싶지는 않습니다 . 우리는 그 이름을 보여주고 싶습니다. 마찬가지로 person.name코드 에도 관심이 없습니다 . as물건을 분류 하는 키워드가 있습니다. 따라서 다음과 같이됩니다.

person.id as person.name for person in people

또는 인스턴스 / 참조 자체 person.id가 필요할 수도 person있습니다. 아래를보십시오 :

person as person.name for person in people

JavaScript 객체의 경우에도 동일한 방법이 적용됩니다. 객체의 항목이 (key, value)쌍으로 구성 되어 있음을 기억하십시오 .

답변

값 속성이 값을 얻는 방법 :

배열을 데이터 소스로 사용하는 경우 각 반복에서 배열 요소의 색인이됩니다.
객체를 데이터 소스로 사용하는 경우 각 반복에서 속성 이름이됩니다.

따라서 귀하의 경우에는 다음과 같아야합니다.

obj = { '1': '1st', '2': '2nd' };

<select ng-options="k as v for (k,v) in obj"></select>

답변

나는이 문제도 가지고 있었다. ng-options에서 내 가치를 설정할 수 없었습니다. 생성 된 모든 옵션은 0, 1, …, n으로 설정되었습니다.

올바르게하기 위해 ng-options에서 다음과 같이했습니다.

HTML :

<select ng-options="room.name for room in Rooms track by room.price">
    <option value="">--Rooms--</option>
</select>

“track by”를 사용하여 모든 값을로 설정했습니다 room.price.

(이 예제는 짜증납니다. 가격이 둘 이상인 경우 코드가 실패하므로 다른 값을 가져야합니다.)

JSON :

$scope.Rooms = [
            { name: 'SALA01', price: 100 },
            { name: 'SALA02', price: 200 },
            { name: 'SALA03', price: 300 }
        ];

블로그 게시물에서 Angular.JS ng-options & track by를 사용하여 선택 요소의 초기 선택된 값을 설정하는 방법 에서 배웠습니다 .

비디오를보십시오. 좋은 수업입니다 🙂

답변

option양식 대신 서버에 양식이 제출되므로 요소 값을 변경하려는 경우 ,

<select name="text" ng-model="text" ng-options="select p.text for p in resultOptions"></select>

당신은 이것을 할 수 있습니다 :

<select ng-model="text" ng-options="select p.text for p in resultOptions"></select>
<input type="hidden" name="text" value="{{ text }}" />

그러면 예상 값이 올바른 이름으로 양식을 통해 전송됩니다.

답변

my_hero일반 양식 제출을 사용하여 서버에 호출 된 사용자 정의 값을 보내려면 다음 을 수행하십시오.

JSON :

"heroes": [
  {"id":"iron", "label":"Iron Man Rocks!"},
  {"id":"super", "label":"Superman Rocks!"}
]

HTML :

<select ng-model="hero" ng-options="obj.id as obj.label for obj in heroes"></select>
<input type="hidden" name="my_hero" value="{{hero}}" />

서버는 iron또는 super값 중 하나를받습니다 my_hero.

이것은 @neemzy의 답변 과 비슷 하지만 value속성에 별도의 데이터를 지정 합니다.

답변

그 표시 ng-options사용에 (아마도 실망) 복잡하지만, 현실에서 우리는 아키텍처 문제가 있습니다.

AngularJS는 동적 HTML + 자바 스크립트 애플리케이션을위한 MVC 프레임 워크 역할을합니다. (V) iew 구성 요소는 HTML “템플릿”을 제공하지만, 주된 목적은 컨트롤러를 통해 사용자 조치를 모델의 변경 사항에 연결하는 것입니다. 따라서 AngularJS에서 작동하는 적절한 추상화 레벨은 select 요소가 모델의 값을 쿼리의 값으로 설정한다는 것 입니다.

쿼리 행이 사용자에게 표시되는 방법은 (V) ie 의 관심사이며 옵션 요소의 내용이 무엇인지 지정 ng-options하는 for키워드를 제공합니다 . p.text for p in resultOptions
선택된 행이 서버에 표시되는 방법은 (M) odel의 관심사입니다. 따라서 에서와 같이 모델에 제공되는 값을 지정 ng-options하는 as키워드를 제공합니다 k as v for (k,v) in objects.

이 문제가 올바른 해결책은 본질적으로 구조적이며 HTML을 리팩터링하여 (M) odel 이 사용자가 양식을 제출하는 대신 필요할 때 서버 통신을 수행하도록합니다 .

MVC HTML 페이지가 현재 문제에 대해 과도한 엔지니어링이 필요하지 않은 경우 : AngularJS (V) ie 구성 요소의 HTML 생성 부분 만 사용하십시오. 이 경우, 같은 요소를 생성하기 위해 사용되는 동일한 패턴을 따르는 <li />의 언더 <ul />들 ‘및 선택 요소에 NG 반복 배치 :

<select name=“value”>
    <option ng-repeat=“value in Model.Values” value=“{{value.value}}”>
        {{value.text}}
    </option>
</select>

으로 kludge , 하나는 항상 숨겨진 입력 요소에 선택 요소의 이름 속성을 이동할 수 있습니다 :

<select ng-model=“selectedValue” ng-options=“value.text for value in Model.Values”>
</select>
<input type=“hidden” name=“value” value=“{{selectedValue}}” />

답변

당신은 이것을 할 수 있습니다 :

<select ng-model="model">
    <option value="">Select</option>
    <option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
</select>

-업데이트

일부 업데이트 후 사용자 frm.adiputra 의 솔루션 이 훨씬 좋습니다. 암호:

obj = { '1': '1st', '2': '2nd' };
<select ng-options="k as v for (k,v) in obj"></select>

어드민

답변

최신 정보

이 못생긴 것들을 기억하는 법

답변

답변

HTML :

JSON :

답변

답변

답변

답변