Uncheck checkbox with submit - AngularJS

Question

I am trying to uncheck checkbox with submit button. The idea is when checkbox is checked button is shown, and when button is clicked checkbox is unchecked and button is hidden.

HTML page:

<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:

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

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

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

On Plukner: http://plnkr.co/edit/z9W0w18dkgYJ3D5Q3aR2?p=preview

Thanks for any help!

What exactly is your question? Can you explain where you're running into problems? Are you getting an error? Is anything happening? — earthling
– earthling, Commented Sep 24, 2014 at 21:26
How to uncheck checkbox with submit button? I set show on false in submit function but ng-model not recognize that show is false to uncheck checkbox. Am I on right way, or that functioning in other way? — peruta
– peruta, Commented Sep 24, 2014 at 21:35

Shomz · Accepted Answer · 2014-09-24 21:58:45Z

3

The problem is that you're using a single variable to store states of 3 items yet Angular creates a scope for each context in the ng-repeat iteration. By changing show to an array and using $index to reference each of them, the show array from the main scope is passed to all three child scopes and there are no conflicts, so it works:

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>

See it here: http://plnkr.co/edit/kfTMaLTXWtpt7N9JVHAQ?p=preview

(note sure if this is exactly what you wanted because there's no question, but it's enough to get you started)

UPDATE

And here is the version where Hide unchecks only "its own" checkbox ($scope.submit now accepts the index parameter): http://plnkr.co/edit/YVICOmQrPeCCUKP2tBBl?p=preview

edited Sep 24, 2014 at 21:58

answered Sep 24, 2014 at 21:33

Shomz

37.7k4 gold badges61 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

peruta Over a year ago

Yeah, that is what I exactly want. I thing in that way, but I didn't find out solution. Thanks a lot.

Shomz Over a year ago

You're welcome! Yeah, it probably didn't like the fact you had 3 models double-binding to a single variable. Also, you have duplicate IDs on the page, make sure you fix that as well.

peruta Over a year ago

Yes, that was the main problem. I'll fix that.

Aditya Sethi · Accepted Answer · 2014-09-24 21:31:32Z

0

You need to change the html code and simplify it as

Instead of form use simple ng-click

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

answered Sep 24, 2014 at 21:31

Aditya Sethi

10.6k11 gold badges28 silver badges31 bronze badges

Collectives™ on Stack Overflow

Uncheck checkbox with submit - AngularJS

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related