在angularjs中显示选中的复选框值

Question

我有一个包含文本框、选择框和复选框的表单。单击保存按钮时，我想在同一页面的网格表中显示表单中的值。我能够显示文本框和选择框的值。但我不知道如何显示选中的复选框值。 HTML 代码：

 <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>

控制器：

    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]);

                }

            }

        }
    }


    );

Answer 1

您可以通过ng-true-value（选中）和ng-false-value（未选中）将复选框的checked/unchecked 值从true/false 更改为自定义字符串。

如果您希望单选按钮具有相同的功能（根据您的评论猜测），您可以通过ng-value 将自定义字符串绑定到每个单选按钮。

参考下面的例子。

<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>