라디오 버튼의 값을 얻기

Question

편집 : 나는 radio의 ng-model를 제출하려고 할 때 내가 undefined을 얻고있다. 내 submit button에서 샘플 코드 :

ng-click="addSubscriber(plan)" 

addSubscriber()하지만 undefined을 받고 내부 console.log(plan)하려고 노력했다.

---

라디오 버튼의 선택 값을 얻는 문제로 인해 두통이 나타납니다. 값이 표시되고 있으며 radio은 내 data에 따라 다릅니다. 그러나 ng-model이 작동하지 않습니다. 선택한 radio의 값을 가져올 수 없습니다.

<div class="row"> 
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
     <div ng-repeat="plan in plans" class="radio"> 
      <label><input type="radio" ng-model="plan.plan" value="{{plan.plan_code}}" name="plan.plan_name">{{plan.plan_name | capitalize}} 
      </label> 
     </div> 
    </div> 
    <pre>{{plan.plan}}</pre> 
</div> 

어떤 값 <pre> 태그에 표시되지 않는다. 나는 다른 주제에서 몇 가지 게시 된 답변을 검색했지만 시도했지만 작동하지 않았습니다.

Answer 1

이 업데이트 :

또 다른 문제는 ng-repeat 내부의 ng-model 컨트롤러 변수를 업데이트 할 수 없음을했다, 이것은 사실 그 때문이다.

ng-repeat 지시어는 새로운 범위를 만듭니다.

따라서 우리는 대신 부모 범위를 업데이트합니다 $parent.chosenPlan에 chosenPlan에서 ng-model을 변경해야합니다.

위의 시나리오에서 입력 라디오 단추는 라디오 단추 그룹으로 작동하는 공통 이름으로 설정해야합니다. 라디오 버튼의 값은 제출 기능에서 사용할 수있는 공통 변수로 설정되어야합니다.

<label> 
    <input type="radio" ng-model="$parent.chosenPlan" ng-value="plan.plan_code" name="test"/> 
     {{plan.plan_name | capitalize}} 
</label> 

상기 형태에서, 우리는이 ng-model 공통 변수로 설정되어 있는지 알 수있다. 그룹 이름 name은 공통 이름으로 설정됩니다.

아래와 같은 작동 모델을 찾으십시오.

JSFiddle Demo

오래 않음 :

<pre> 태그는 다음과 같이 그 내부에 ng-value 값을 변경 ng-repeat 움직임 밖에. 적절한 값을 갖는 이름은 name="{{plan.plan_name}}"이어야합니다. 문제가 발생하면 알려주세요.

<div ng-controller='MyController'> 
    <div class="row"> 
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
     <div ng-repeat="plan in plans" class="radio"> 
     <label> 
     <input type="radio" ng-model="plan.plan" ng-value="plan.plan_code" name="{{plan.plan_name}}"/>{{plan.plan_name | capitalize}} 
     </label> 
     <pre>{{plan.plan}}</pre> 
     </div> 
    </div> 
    </div> 
</div> 

는 데이터를 조롱 참조에 대한 예를 제공한다 : 나는 NG 모델 값을 제출할 때 왜

JSFiddle Demo

Answer 2

<pre>{{plan.plan}}</pre>은 ng-repeat의 범위 밖에 있으므로 plan.plan은 인식 할 수 없습니다.

<div class="row"> 
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
    <div ng-repeat="plan in plans" class="radio"> 
     <label><input type="radio" ng-change="radioChanged()" ng-model="plan.plan" value="{{plan.plan_code}}" name="plan.plan_name">{{plan.plan_name}} 
     </label> 
     <pre>{{plan.plan}}</pre> 
    </div> 
</div> 

나는 또한 'NG 변화'기능을 추가 한, 그래서 당신은 몇 가지를 넣어 시도 할 수 있습니다 - 각 라디오 버튼의 값을 표시하려는 경우, 당신은 그런 식으로 시도 할 수 있습니다 그 함수 안에 디버거를 추가하고 컨트롤러 내부에서 변경된 값을 살펴보십시오.