2014-09-24 25 views
0

제출 버튼으로 확인란을 선택 취소하려고합니다. 체크 박스가 체크되어있는 것을 생각하고, 버튼을 클릭하면 체크 박스가 체크되지 않고 버튼이 숨겨집니다.제출 확인란을 선택 취소하십시오 - AngularJS

HTML 페이지 :

<html ng-app="myApp" ng-controller="myCtrl"> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> 
    <script src="script.js"></script> 
    <meta charset=utf-8 /> 
</head> 

<body> 
    <div ng-repeat="foo in boxes"> 
    <div> 
     <input type="checkbox" name="cb" id="cb" ng-model="show" />{{foo}} 
    </div> 
    <div ng-show="show"> 
     <form ng-submit="submit()"> 
     <input type="submit" name="sumbit" id="sumbit" value="Hide" /> 
     </form> 
    </div> 
    </div> 
</body> 
</html> 

JS : Plukner에

var app = angular.module('myApp', []); 

app.controller('myCtrl', function($scope) { 
    $scope.boxes = ['a','b','c']; 

    $scope.submit = function(){ 
    $scope.show = false; 
    } 
}); 

는 : 어떤 도움 http://plnkr.co/edit/z9W0w18dkgYJ3D5Q3aR2?p=preview

감사합니다!

+0

정확히 무엇 :하지만 여기 숨기기 선택 취소 만 "자신의"체크 박스 ($scope.submit 이제 인덱스 매개 변수를 허용하는 버전)입니다) 당신이 시작


UPDATE

를 얻기 위해 충분 그리고 너의 질문? 문제가있는 곳을 설명 할 수 있습니까? 오류가 있습니까? 무슨 일있어? – earthling

+0

제출 버튼으로 확인란의 선택을 취소 하시겠습니까? 제출 기능에서 show on을 false로 설정했지만 ng-model은 show가 false 인 것을 인식하지 못해 선택을 취소합니다. 나는 바른 길에 있습니까, 아니면 다른 방향으로 작용하고 있습니까? – peruta

답변

3

문제 간단한 양식 사용의

로 HTML 코드를 변경하고 단순화하기 위해 아직 3 개 항목의 상태를 저장하는 하나의 변수를 사용하고 있다는 것입니다 필요 Angular는 ng-repeat 반복에서 각 컨텍스트의 범위를 만듭니다. 배열에 show을 변경하고 각을 참조 할 $index를 사용하여 주 범위에서 show 배열은 세 아이의 범위에 전달되고 충돌이 없다, 그래서 작동합니다

app.controller('myCtrl', function($scope) { 
    $scope.boxes = ['a','b','c']; 
    $scope.show = []; 
    $scope.submit = function(){ 
    $scope.show = []; 
    } 
}); 

HTML

<div ng-repeat="foo in boxes"> 
    <div> 
     <input type="checkbox" name="cb" id="cb" ng-model="show[$index]" />{{foo}} 
    </div> 
    <div ng-show="show[$index]"> 
     <form ng-submit="submit()"> 
     <input type="submit" name="sumbit" id="sumbit" value="Hide" /> 
     </form> 
    </div> 
    </div> 

는 여기를 참조하십시오 : 이것은 의심의 여지가 없기 때문에 당신이 원하는 무엇을 정확히 경우 http://plnkr.co/edit/kfTMaLTXWtpt7N9JVHAQ?p=preview

(확인주의, http://plnkr.co/edit/YVICOmQrPeCCUKP2tBBl?p=preview

+0

그래, 그게 내가 정확히 원하는거야. 그런 식으로,하지만 해결책을 찾지 못했습니다. 고마워. – peruta

+0

안녕하세요. 네, 3 개의 모델이 하나의 변수에 이중 바인딩되어 있다는 사실을 아마 좋아하지 않을 것입니다. 또한 페이지에 ID가 중복되어 있으므로이를 수정해야합니다. – Shomz

+0

예, 이것이 주된 문제였습니다. 나는 그것을 고쳐 줄 것이다. – peruta

0

당신은 대신 ng-click

<div ng-show="show"> 
    <input type="submit" value="Hide" ng-click="show = !show" /> 
</div>