带有选择、复选框和单选按钮的 Angular JS 表单
Posted
技术标签:
【中文标题】带有选择、复选框和单选按钮的 Angular JS 表单【英文标题】：Angular JS form with select, checkbox and radio button 【发布时间】：2015-11-02 05:56:30 【问题描述】：我是 Angular JS 的新手。我创建了一个带有选择、复选框和单选按钮的简单表单。我不清楚这些值如何以角度绑定到这些字段。如何最小化我的 html 代码并在我的控制器中指定值。我希望在单击计算按钮时添加每个值的结果并显示为总计。我的表格如下。
HTML
<body ng-app="myApp">
<div class="container" ng-controller="totalController">
<form class="form-horizontal" role="form" ng-submit="calculate()">
<div class="form-group">
<label for="sel1">Select Model:</label>
<select class="form-control" id="sel1">
<option value="40000">Moto turbo</option>
<option value="20000">Moto X</option>
<option value="10000">Moto G</option>
<option value="5000">Moto E</option>
</select>
</div>
<div class="form-group">
<label for="color" class="color">Select Color:</label>
<label class="radio-inline">
<input type="radio" name="optradio" value="400">
Black </label>
<label class="radio-inline">
<input type="radio" name="optradio" value="300">
Red </label>
<label class="radio-inline">
<input type="radio" name="optradio" value="300">
White </label>
<label class="radio-inline">
<input type="radio" name="optradio" value="200">
Yellow </label>
<label class="radio-inline">
<input type="radio" name="optradio" value="250">
Blue </label>
</div>
<div class="form-group">
<label for="sel1">Select Panel:</label>
<label class="checkbox-inline">
<input type="checkbox" value="200">
Set of 1 Panel</label>
<label class="checkbox-inline">
<input type="checkbox" value="400">
Set of 2 Panel</label>
<label class="checkbox-inline">
<input type="checkbox" value="600">
Set of 3 Panel</label>
</div>
<button type="submit" class="btn btn-primary">Calculate</button>
<div role="alert" class="alert alert-success" ng-show="showTotal"> Total is : </div>
</form>
</div>
<!--container-->
</body>
控制器
var myApp = angular.module('myApp',[]);
myApp.controller('totalController',["$scope",function($scope)
$scope.showTotal = false;
$scope.calculate = (function()
$scope.showTotal = true;
);
]);
我的目标是了解选择、复选框和单选按钮的值绑定。
【问题讨论】：
对于选择，使用 ng-options，对于其他人，使用 ng-repeat 学习一些表单教程并熟悉 Angular 文档。使用ng-model 将用户输入绑定到数据模型
【参考方案1】：
这是一个具体的方法：
http://plnkr.co/edit/WHmg6hShcfUF4FK1ajDk?p=preview
通常，为了访问控制器中的表单元素，您需要使用ng-model。我建议在这里查看文档：https://docs.angularjs.org/api/ng/input
【讨论】：
【参考方案2】：对于下拉部分，试试这个代码
<div ng-controller="MyController" >
<form>
<select ng-model="myForm.car"
ng-options="obj.id as obj.name for obj in myForm.options">
</select>
</form>
<div>
myForm.car
</div>
</div>
<script>
angular.module("myapp", [])
.controller("MyController", function($scope)
$scope.myForm = ;
$scope.myForm.car = "nissan";
$scope.myForm.options = [
id : "nissan", name: "Nissan"
, id : "toyota", name: "Toyota"
, id : "fiat" , name: "Fiat"
];
);
</script>
【讨论】：
以上是关于带有选择、复选框和单选按钮的 Angular JS 表单的主要内容，如果未能解决你的问题，请参考以下文章
在javascript单击处理程序中隐藏和单选按钮和复选框标签