0

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>{{ product.name }}</td>
                <td>{{ product.catg }}</td>
                <td>{{ product.tag }}</td>
                <td>{{product.id}}</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]);

                }

            }

        }
    }


    );
Improve this question

1 Answer 1

Reset to default
1

you can change checkbox's checked/unchecked value from true/false to custom string by ng-true-value(checked) and ng-false-value(unchecked).

and if you want the same feature for radiobutton(guessed from your comment), you can bind custom string to each radio button by ng-value.

refer the below example.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app ng-init="value='YES';value2='option1';">
  <label>
  <input type="checkbox" ng-model="value" ng-true-value="'YES'" ng-false-value="'NO'">checkbox</label><br> {{value}}
  <br>
  <label><input type="radio" name="option" ng-model="value2" ng-value="'option1'">{{option1}}</label>
  <label><input type="radio" name="option" ng-model="value2" ng-value="'option2'">{{option2}}</label>
  <label><input type="radio" name="option" ng-model="value2" ng-value="'option3'">{{option3}}</label>
  <br>
  {{value2}}
</div>

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

5 Comments

@yamuna you want the same feature for radio button?
yes..and also I am getting an empty row at starting when I run the code, since I have empty values in $scope.products . How to avoid the empty row
@yamuna you have to initialize value which bind to checkbox/radiobutton with ng-model or else it'll be blank when initialized. (refer what I do in ng-init for example).
can u please explain me clearly..it would be better you post code snippet
@yamuna there is an example provided at my answer.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.