Angularjs 단일 선택 상자 와 관련 된 예제 코드

본 고 는 Angularjs 단일 선택 상자 와 관련 된 예제 코드 를 소개 하여 여러분 에 게 공유 합 니 다.구체 적 으로 다음 과 같다.
angular 1.6.5 사용 하기
1.ng-repeat 에서 옮 겨 다 니 는 radio 의 value 가 져 오기
1)일반 형식(ng-repeat 사용 하지 않 음)
정상적으로 표시 가능

  <input type="radio" name="t1" ng-model="demo" value="a">a <br>
  <input type="radio" name="t1" ng-model="demo" value="b">b
  <h2>{{demo}}</h2>

ng-repeat 사용 안 함
2)ng-repeat 사용
표시 할 수 없 음

  <label ng-repeat="x in arrStr">
    <input type="radio" name="type1" ng-model="demo" value="{{x}}">
    {{x}}
  </label>
  {{demo}}
3)해결 2 의 문제
ng-repeat 를 사용 하려 면 ng-model 에$parent 를 추가 해 야 합 니 다.

  <div ng-app="myApp" ng-controller="myCtrl">
    <label ng-repeat="x in arrStr">
      <input type="radio" name="demo" value="{{x}}" ng-model="$parent.demo">{{x}}
    </label>
    <h1>{{demo}}</h1>
  </div>

성공 표시
원인:ng-repeat 에서$scope 의 역할 영역 은 전역 적 이지 않 고 국부 변수 에 해당 하기 때문에 전역 적 으로 변 수 를 접근 할 수 없습니다.따라서$parent 를 사용 하여 전역 변수 로 만 들 고 전역 적 으로 접근 할 수 있 습 니 다.
2.ng 체크 상자 의 예 사용
json 동적 생 성,데이터 바 인 딩
1)단일 선택 상자 의 json 데이터 생 성

  [{
    "display":"  ",
    "data_range":["true","false"]
   },
   {
    "display":"    ",
    "data_range":["  ","  "]
   }]
2)HTML 코드
json 데 이 터 를 통 해 알 수 있 듯 이 ng-repat 두 개 를 사용 해 야 합 니 다.하 나 는 전 체 를 옮 겨 다 니 는 데 사용 되 고 하 나 는 옵션 을 옮 겨 다 니 는 데 사 용 됩 니 다.

  <div ng-app="myApp" ng-controller="myCtrl">
    <div ng-repeat="x in str">
      <span>{{x.display}}:</span>
      <label ng-repeat="y in x.data_range">
        <input type="radio" name="{{x.display}}" ng-model="$parent.demo" value="{{y}}">{{y}}    
      </label>
          :{{demo}}
    </div>
  </div>
3)js 코드
고정 데 이 터 를 사용 하기 때문에 간단 한 초기 화 입 니 다.

var app = angular.module("myApp", [])
    app.controller("myCtrl", function($scope, $log, $http){
      $scope.str = [
        {
          "display":"  ",
          "data_range":["true","false"]
        },
        {
          "display":"    ",
          "data_range":["  ","  "]
        }
      ]
    })
4)결과 캡 처
결과 캡 처

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기