CODEWITHSUNDEEP
angularjscheckbox
peruta
peruta

Reputation: 3

Uncheck checkbox with submit - AngularJS

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!

Upvotes: 0

Views: 6524

Answers (2)

Shomz
Shomz

Reputation: 37701

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

Upvotes: 3

Aditya Sethi
Aditya Sethi

Reputation: 10586

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>

Upvotes: 0

Related Questions