我有一个包含文本框,选择框和复选框的表单。我想在单击保存按钮时在同一页面的网格表中显示表单中的值。我能够显示文本框和选择框值。但我不知道如何显示所选的复选框值。 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]);
}
}
}
}
);
答案 0 :(得分:1)
您可以通过checked/unchecked
(已选中)和true/false
(未选中)将复选框的ng-true-value
值从ng-false-value
更改为自定义字符串。
如果你想为radiobutton提供相同的功能(从你的评论中猜到),你可以通过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>
&#13;