angularjs, $ scope 게시 및 선택 상자

Question

나는 양식을 작성하여 angularjs (멋진 btw)를 뒤범벅합니다. json의 데이터를로드하고 데이터를 성공적으로 읽을 수는 있지만 작성한 플러 커와 관련하여 몇 가지 질문이 있습니다. (http://plnkr.co/edit/LHX40xHKmoB9onboeNrV?p=preview)

나는 거기에 두 가지 형식을 가지고 있는데, 두 가지 모두 작동합니다. 계속하기 전에 anglejs 프로에 대한 요청이 있습니다. 전반적으로 내 plunker 코드 스타일이 적절한 각도 방식입니까? 어떻게 개선 할 수 있습니까? 감사.

FORM # 1 : 양식이 작동하려면, 내가 'country'을 지정한 JSON에 countries에서 값의 취득

어쨌든, 다음 코드는 두 형태 사이의 차이는 .

JS :

$scope.vm.country = data[0].countries[0]; 

HTML :

Country: <select ng-model="vm.country" ng-options="c.name for c in vm.countries"></select> 

FORM # 2 : 이것 JSON은 2가 약간 다르다. countries 배열은 country입니다. 선택 옵션 expr 자체가 참조 - 실패 함. 여기에 제출 된 json on-click은 국가 코드/이름에 대한 올바른 값을 가지고 있습니다. 그 값은 내가 원하는 것이 아니고 cities 배열을 포함하고 있습니다.

JS :

$scope.vm.country = data[0].country[0]; 

HTML :

Country: <select ng-model="vm.country" ng-options="c.name for c in vm.country"></select> 

내가 선택 상자가 Form2를에있는 방법으로 행동하는 이유를 정확하게 알고 싶습니다. 양식을 제출할 때 쓸모없는 데이터를 보내는 것은 바람직하지 않습니다. 그럼 당신은 당신이 필요로하는 물건만을 보내려한다면 어떻게 될까요 $scope.vm? 작은 폼의 경우 수동으로 새 $ scope 항목에 각 입력을 추가하면 좋지만 입력이 많은 거대한 양식의 경우 이상적이지는 않습니다.

업데이트

여기서 개별 변수 ($scope.form)에 넣고 적당한 값으로 작동 용액이다. 또한 $watch이 ng-change으로 변경되었습니다. 이것은 다른 사람들을 도울 수 있습니다.

http://plnkr.co/edit/NDSvKS0mEF1Wgp2CBIOB?p=preview

Answer 1

그것은 미묘한 버그. json 파일을 살펴보면 "목록"국가가 country라는 것을 알 수 있습니다. 국가를으로 변경하십시오. 실패한 이유는 컨트롤러에서 vm.country를 설정할 때 전체 목록을 무시하기 때문입니다. 간단한 수정 사항을 표시하기 위해 plunker을 분기/업데이트했습니다.

양식 데이터가 나오면 양식 요소에 선택 물을 래핑하고 값을 가져 오는 것이 좋습니다. 이 문제에 관해 Angularjs's Page을 확인하십시오.

전반적으로 올바른 앵귤러 코드 스타일은 올바른 각도입니까? 어떻게 개선 할 수 있습니까? 감사.

컨트롤러가 몇 개 밖에 없기 때문에 나쁘지 않습니다. 각도를 사용할 때 도움이되는 몇 가지 사항이 있습니다.

1) 디버깅 HTML은 이러한 경우에 성가심 일 수 있습니다. 운 좋게 각도의 "angular.element"메쏘드는 html AS를 엘리먼트의 범위를 검사하는 능력으로 돌려 준다. 어떻게 작동하는지이 debugging tutorial을보십시오. firebug 또는 chrome dev 도구를 사용하는 경우에도 동일한 개념이 적용됩니다.

2) 가능한 모든 곳에서 $ watch 메소드를 피할 수있는 방법을 생각해보십시오. 그 이유는 업데이트가 호출 된 범위와 직접 관련이 없더라도 앱에서 ANY 업데이트가 발생할 때마다이 메서드가 호출되기 때문입니다. 제안으로, 프레임 워크의 $ digest를 $ watch가 호출하지 않고 실제 dom 요소가 변경 될 때만 실행해야하는 select 문에 ng-change 지시문을 추가 할 수 있습니다.

희망이 도움이됩니다.