ng-options를 사용하여 객체 배열로 여러 선택 요소 선택을 구체화합니다.

AshClarke

객체 배열이 있다고 가정합니다.

var people = [
  {name: "person 1", favouriteThing: 'pizza'},
  {name: "person 1", favouriteThing: 'vegetables'},
  {name: "person 2", favouriteThing: 'spinach'},
  {name: "person 2", favouriteThing: 'kimchi'},
];

첫 번째 요소가 옵션으로 '사람 1'과 '사람 2'만 포함하도록 선택 요소로이 데이터를 구체화 할 수 있기를 원합니다 (중복 없음). '사람 1'을 선택한 후 두 번째 선택 요소에서 피자와 야채를 사용할 수 있어야합니다.

현재 선택 요소에 대한 내용은 다음과 같습니다.

<select ng-options="person.name for person in people" ng-model="name"></select>

<select ng-options="person.favouriteThing group by name for person in people"></select>

내가 취해야 할 접근 방식에 대한 약간의 의견을 바라고 있습니다. 이런 물건을 더 사용해야할까요? (내 상황에 적합하지 않음)

var people = [
  {name: "person 1", 
   favouriteThings: ['pizza', 'vegetables']
  },
  {name: "person 2", 
   favouriteThings: ['spinach', 'kimchi']
  }
];
다발 센그

plnkr 생성

두 가지 해결책을 가질 수 있습니다

(1) '이름'속성별로 그룹이있는 단일 선택을로드합니다.

<select ng-options="person.favouriteThing  group by person.name for person  in c.people" ng-model="name"></select>

(2) 두 개의 다른 선택을로드합니다. 하나는 이름이 있고 하나는 마음에 드는 것입니다. 이름 변경시 좋아하는 것을로드 할 수 있습니다.

<select ng-options="person.name for person in c.getPeopleName()" ng-model="personName"></select>
<select ng-options="person.favouriteThing for person  in c.getFavoriteThing(personName)" ng-model="favoriteThing"></select>


  this.getPeopleName = function () {
      return _.uniq(this.people, function (item) {return item.name;})
  };

  this.getFavoriteThing = function (people) {
    var arr = [];
    _.each(this.people, function (item) {
      if(item.name === people.name) {
        arr.push(item);
      }
    });

    return arr;
  };

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

객체를 선택하는 방법, 자식의 배열 값을 사용하여 ..?

분류에서Dev

JQ를 사용하여 객체 요소의 지정된 키-값과 일치하도록 선택을 사용하여 객체의 JSON 배열을 구문 분석 한 다음 CSV로 변환

분류에서Dev

numpy : 여러 산술 시퀀스 요소를 선택하여 여러 배열을 형성합니다.

분류에서Dev

객체 배열에서 ng-options로 AngularJS 선택

분류에서Dev

jQuery로 여러 값을 사용하여 ID로 요소 선택

분류에서Dev

XSLT는 키로 여러 요소를 선택합니다.

분류에서Dev

Python 3의 구조 요소를 사용하여 배열의 픽셀 선택

분류에서Dev

jq : 객체 / 임베디드 배열에서 값을 선택적으로 선택하여 CSV 구성

분류에서Dev

angularjs의 ng-options를 사용하여 선택 상자에서 여러 옵션을 선택하십시오.

분류에서Dev

문자열 이름을 사용하여 개체를 선택합니까?

분류에서Dev

구조체 배열을 사용하여 선택 정렬, strcmp를 사용하여 정렬

분류에서Dev

추가 구성 요소를 사용하여 선택 요소를 Div로 변경

분류에서Dev

변수를 사용하여 키로 객체 노드를 선택하는 방법

분류에서Dev

배열을 사용하여 알 수없는 요소의 필터를 적용합니다. 또는 사용자로부터 선택 레코드 숨기기

분류에서Dev

Javascript는 다른 변수의 값을 사용하여 객체를 선택하고 사용합니다.

분류에서Dev

배열에서 객체를 여러 번 무작위로 선택하고 각각을 배열에 저장하는 방법은 무엇입니까?

분류에서Dev

JavaScript를 사용하여 HTML DOM 개체 배열에서 데이터 선택기로 요소를 찾는 방법은 무엇입니까?

분류에서Dev

perl에서 grep을 사용하여 한 배열에서 다른 배열로 요소를 선택하는 방법은 무엇입니까?

분류에서Dev

여러 jquery 객체 변수를 선택기로 사용하는 방법은 무엇입니까?

분류에서Dev

여러 jquery 객체 변수를 선택기로 사용하는 방법은 무엇입니까?

분류에서Dev

ng-options를 사용하여 선택 드롭 다운에 개체 데이터 표시

분류에서Dev

LINQ를 사용하여 여러 사전의 값을 개체 목록으로 선택

분류에서Dev

Javascript 객체를 반복하여 선택한 항목을 선택하는 방법

분류에서Dev

mysql을 사용하여 선택 요청 결과를 nodejs의 배열로 변환

분류에서Dev

Ionic`onHold`와 Angularjs`ng-click`을 결합하여 요소 선택

분류에서Dev

VueJs2의 배열로 JSON 개체를 구문 분석 한 다음 배열을 렌더링하여 옵션을 선택합니다.

분류에서Dev

여러 배열에서 요소 선택

분류에서Dev

여러 배열에서 요소 선택

분류에서Dev

함수를 사용하여 선택된 체크 박스 요소 제거

Related 관련 기사

  1. 1

    객체를 선택하는 방법, 자식의 배열 값을 사용하여 ..?

  2. 2

    JQ를 사용하여 객체 요소의 지정된 키-값과 일치하도록 선택을 사용하여 객체의 JSON 배열을 구문 분석 한 다음 CSV로 변환

  3. 3

    numpy : 여러 산술 시퀀스 요소를 선택하여 여러 배열을 형성합니다.

  4. 4

    객체 배열에서 ng-options로 AngularJS 선택

  5. 5

    jQuery로 여러 값을 사용하여 ID로 요소 선택

  6. 6

    XSLT는 키로 여러 요소를 선택합니다.

  7. 7

    Python 3의 구조 요소를 사용하여 배열의 픽셀 선택

  8. 8

    jq : 객체 / 임베디드 배열에서 값을 선택적으로 선택하여 CSV 구성

  9. 9

    angularjs의 ng-options를 사용하여 선택 상자에서 여러 옵션을 선택하십시오.

  10. 10

    문자열 이름을 사용하여 개체를 선택합니까?

  11. 11

    구조체 배열을 사용하여 선택 정렬, strcmp를 사용하여 정렬

  12. 12

    추가 구성 요소를 사용하여 선택 요소를 Div로 변경

  13. 13

    변수를 사용하여 키로 객체 노드를 선택하는 방법

  14. 14

    배열을 사용하여 알 수없는 요소의 필터를 적용합니다. 또는 사용자로부터 선택 레코드 숨기기

  15. 15

    Javascript는 다른 변수의 값을 사용하여 객체를 선택하고 사용합니다.

  16. 16

    배열에서 객체를 여러 번 무작위로 선택하고 각각을 배열에 저장하는 방법은 무엇입니까?

  17. 17

    JavaScript를 사용하여 HTML DOM 개체 배열에서 데이터 선택기로 요소를 찾는 방법은 무엇입니까?

  18. 18

    perl에서 grep을 사용하여 한 배열에서 다른 배열로 요소를 선택하는 방법은 무엇입니까?

  19. 19

    여러 jquery 객체 변수를 선택기로 사용하는 방법은 무엇입니까?

  20. 20

    여러 jquery 객체 변수를 선택기로 사용하는 방법은 무엇입니까?

  21. 21

    ng-options를 사용하여 선택 드롭 다운에 개체 데이터 표시

  22. 22

    LINQ를 사용하여 여러 사전의 값을 개체 목록으로 선택

  23. 23

    Javascript 객체를 반복하여 선택한 항목을 선택하는 방법

  24. 24

    mysql을 사용하여 선택 요청 결과를 nodejs의 배열로 변환

  25. 25

    Ionic`onHold`와 Angularjs`ng-click`을 결합하여 요소 선택

  26. 26

    VueJs2의 배열로 JSON 개체를 구문 분석 한 다음 배열을 렌더링하여 옵션을 선택합니다.

  27. 27

    여러 배열에서 요소 선택

  28. 28

    여러 배열에서 요소 선택

  29. 29

    함수를 사용하여 선택된 체크 박스 요소 제거

뜨겁다태그

보관