AngularJS 폼 요소 값 바 인 딩 작업 예제 구현

2069 단어 AngularJS양식
본 논문 의 사례 는 AngularJS 가 폼 요소 값 바 인 딩 작업 을 실현 하 는 것 을 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.ng-disabled바 인 딩 컨트롤 의 disabled 속성ng-show:원 소 를 표시 하거나 숨 기기:ms-visible
ng-show 의 기능 과 정반 대
css 내용:

div.d1{
 width: 20px;
 height: 20px;
 background-color: pink;
}
div.d2{
  width: 20px;
 height: 20px;
 background-color: black;
}
HTML 본문:

<body ng-app="myApp" ng-controller="myctr">
<div>
   ：<input type="text" placeholder="....." ng-disabled="flag">{{flag}}<br>
    ：<input type="button" value="switch input" ng-click="switchInput();">
</div>
<hr ng-init="checkValue=false">
input:<input type="text" ng-disabled="checkValue">{{checkValue}}<br>
<input type="checkbox" ng-model="checkValue">stop input <!--   ng-model         -->
<hr>
<p>ng-show:flag</p>
<div class="d1" ng-show="flag"></div>
<p>ng-hide:checkValue</p>
<div class="d2" ng-hide="checkValue"></div>
<hr>
<!-- ng-click：          ，        ，     ++   -->
<input type="button" ng-click="count = count + 1" value=" 1">：{{count}}
Javascript 조작 코드:

var app = angular.module('myApp', []);
app.controller('myctr', function($scope) {
  $scope.flag=false;
  $scope.count=0;
  $scope.switchInput=function(){
    $scope.flag=!$scope.flag;
  };
});
효과:

AngularJS 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있 습 니 다.,과 을 볼 수 있 습 니 다.
본 고 에서 말 한 것 이 여러분 의 AngularJS 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.
Node.js 학습 의 TCP/IP 데이터 통신(인 스 턴 스 설명)
JQuery 전 선/반 선 2 차 실효 문제 해결

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage