lundi 22 mai 2017

Display selected checkbox value in angularjs

I have a form which have textbox,selectbox and checkbox. I want to display the values in the form in a grid table in the same page when the save button is clicked. I was able to display the textbox and selectbox value .But I dont know how to display the selected checkbox value.attached the output here HTML code:

 <div ng-controller="ProductCtrl">
 <form class=rform align="center">
 Product Name: <input type="text" name="name" ng-model="newProduct.name" ><br>
 Product Category: <select name="catg" ng-model="newProduct.catg" ng-options="x for x in catg" ></select><br>
 Tags  :<input  type="checkbox" name="Electronics" ng-model="newProduct.Electronics" value="Electronics" >Electronics
  <input type="checkbox" name="Appliances"  ng-model="newProduct.Appliances" value="Appliances">Appliances
  <input type="checkbox" name="Others" ng-model="newProduct.Others" value="Books">Others

 <input type="hidden" ng-model="newProduct.id" />
 <div class="btn"> <button type="submit"  ng-click="saveRecord()">Save</button></div>
</form>
        <table border="2px" align="center" >
            <tr>
                <th>Product name</th>
                <th>Category</th>
                <th>Tag</th>
                <th>id</th>
                <th>Action</th>
            </tr>
            <tr ng-repeat="product in products">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
              <td>  <a  href="#/form"    ng-click="edit(product.id)">edit</a> | 

                    <a href="#/form" ng-click="delete(product.id)">delete</a></td>
            </tr>
        </table>
 </div>

controller :

    app.controller('ProductCtrl',function($scope,$http){

 $scope.catg = ["mobile","TV","Air Conditioner","Kitchen appliances","Footwear","SportsWear","clothes","watches"];

      var empid =0;
      var id = 0;
      $scope.products= [

            { id:'' , 'name': '', 'catg': '', 'tag': '' }

        ];

    $scope.saveRecord = function () {

            if ($scope.newProduct.id == null) {

                $scope.newProduct.id = empid++;

                $scope.products.push($scope.newProduct);

            } else {



                for (i in $scope.products) {

                    if ($scope.products[i].id == $scope.newProduct.id) {

                        $scope.products[i] = $scope.newProduct;

                    }

                }

            }

            $scope.newProduct = {};

        }



       $scope.delete = function (id) {



            for (i in $scope.products) {

                if ($scope.products[i].id == id) {

                    $scope.products.splice(i, 1);

                    $scope.newProduct = {};

                }

            }



        }



        $scope.edit = function (id) {

            for (i in $scope.products) {

                if ($scope.products[i].id == id) {

                    $scope.newProduct = angular.copy($scope.products[i]);

                }

            }

        }
    }


    );




Aucun commentaire:

Enregistrer un commentaire