CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scopeangularjs-ng-repeat
Naveen
Naveen

Reputation: 777

Checkbox selection not working in angularjs

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

Upvotes: 0

Views: 110

Answers (3)

Rahul_Y13
Rahul_Y13

Reputation: 109

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

Upvotes: 2

Diana R
Diana R

Reputation: 1174

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.

Upvotes: 0

Sebastian
Sebastian

Reputation: 166

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.

Upvotes: 0

Related Questions