Checkbox selection not working in angularjs

Question

HTML

<form role="form" ng-submit="addStore(store)" name="AddStoreForm" novalidate>
    <label>Store Category</label>
        <label class="checkbox-inline"  ng-repeat="store_category in store_cat">
            <input type="checkbox" name="store_category" ng-model="store.store_category">{{store_category.name}}
        </label>
    </label>
 </form>
 <button type="submit" class="btn btn-primary campwidth">SUBMIT</button>

AngularJS

$scope.store_cat = [
    { name: 'A', selected: false },
    { name: 'B', selected: false },
    { name: 'C', selected: false }
];
$scope.addStore = function(store){
    console.log("responsestore", store);
    alert(store.store_category);
};

Here I put store category as array. After submit the form. I got alertbox category undefined. I want to sent the result using API. how to fix this problem. PLUNKER

can you explain how your example should work? what should happen and when clicking on what? — Diana R
– Diana R, Commented Oct 9, 2015 at 11:49

Rahul_Y13 · Accepted Answer · 2015-10-09 12:33:17Z

2

It will work with button tag not with form as in bootstrap <button type="submit" class="btn btn-primary campwidth" ng-click="addStore(store_cat)">SUBMIT</button> here no need of using the form tag b'coz it may leads to conflict in angular.js so, it will work definately for checkbox. http://plnkr.co/edit/qSFnxTNZ4n63pw3JXZA5?p=preview

answered Oct 9, 2015 at 12:33

Rahul_Y13

1091 silver badge7 bronze badges

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

Comments

Sebastian · Accepted Answer · 2015-10-09 11:58:11Z

0

You can, do something like that: <button type="submit" class="btn btn-primary campwidth" ng-click="addStore(store_cat)">SUBMIT</button> here http://plnkr.co/edit/KtBzqeMF9FZt6bnI0MBF?p=preview You shouldn't use form and take on that function nope, that way is wrong when you use angular.

answered Oct 9, 2015 at 11:58

Sebastian

1663 silver badges17 bronze badges

Comments

Diana R · Accepted Answer · 2015-10-09 12:00:49Z

0

Assuming your issue is with data format not being pushed into a new store object, here is a solution for that:

<form role="form" name="AddStoreForm" novalidate ng-init="store={}">
  <label>Store Category</label>
  <label class="checkbox-inline" ng-repeat="store_category in store_cat">
    <input type="checkbox" name="store_category" ng-init="store[$index]={name: store_category.name, selected: false}" ng-model="store[$index].selected">{{store_category.name}}
  </label>
  </label>
  <button type="submit" ng-click="addStore(store)"  class="btn btn-primary campwidth">SUBMIT</button>
</form>

And the plunker with working example.

answered Oct 9, 2015 at 12:00

Diana R

1,1741 gold badge9 silver badges24 bronze badges

Collectives™ on Stack Overflow

Checkbox selection not working in angularjs

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related