angularJS-使用ng-repeat 创建radio group , checkbox group, table
林弘文
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
<style type="text/css">
table.dataintable {
margin-top: 10px;
border-collapse: collapse;
border: 1px solid #aaa;
width: 100%;
}
table.dataintable th {
vertical-align: baseline;
padding: 5px 15px 5px 6px;
background-color: #d5d5d5;
border: 1px solid #aaa;
text-align: left;
}
table.dataintable td {
vertical-align: text-top;
padding: 6px 15px 6px 6px;
background-color: #efefef;
border: 1px solid #aaa;
}
table.dataintable pre {
width: auto;
margin: 0;
padding: 0;
border: 0;
background-color: transparent;
}
table.dataintable p {
margin: 0 0 2px 0;
}
</style>
<script>
angular.module('valueExample', [])
.controller('ExampleController', ['$scope', function ($scope) {
$scope.radioNames = ['pizza', 'unicorns', 'robots'];
$scope.radioButton = { choosen: 'unicorns' };
$scope.fruits = [
{ name: 'apple', selected: true, quantity: 200,price:4.00 },
{ name: 'orange', selected: false, quantity: 200 ,price:2.00 },
{ name: 'banana', selected: false, quantity: 300 ,price:3.50 }];
$scope.checkboxButton = { choosen: ' ' };
$scope.checkboxChangeed = { choosen: ' ' };
$scope.save = function () {
var myFruits = [];
$scope.checkboxButton.choosen = "";
for (i = 0; i < $scope.fruits.length; i++) {
if ($scope.fruits[i].selected) {
myFruits.push($scope.fruits[i].name);
$scope.checkboxButton.choosen += $scope.fruits[i].name + ", ";
}
}
}
$scope.choseEvent = function (e) {
var ddd = this.$index;
// if(this.fruit.selected)
{
$scope.checkboxChangeed.choosen = this.fruit.name;
}
}
$scope.remove = function (index) {
$scope.fruits.splice(index, 1);
}
}]);
</script>
</head>
<body ng-app="valueExample">
<form ng-controller="ExampleController">
<h2>Which is your favorite food?</h2>
<label ng-repeat="name in radioNames" style="display:block" for="{{name}}">
<input type="radio" ng-model="radioButton.choosen" ng-value="name" id="{{name}}" name="radioBtn">
{{name}}
</label>
<div>You chose {{radioButton.choosen}}</div>
<h2>Which is your favorite fruit?</h2>
<label ng-repeat="fruit in fruits" style="display:block" for="{{fruit.name}}">
<input type="checkbox" ng-value="fruit.name" ng-model="fruit.selected" id="{{fruit.name}}" name="{{fruit.name}}"
ng-click="choseEvent()">
{{fruit.name}}
</label>
<input type="button" ng-click="save()" value="SAVE" />
<div>You chose {{checkboxButton.choosen}}</div>
<div>You change {{checkboxChangeed.choosen}}</div>
</form>
<h2>Fruits table</h2>
<table ng-controller="ExampleController" class="dataintable">
<tr>
<th>index</th>
<th>name</th>
<th>quantity</th>
<th>price</th>
<th>total price</th>
<th></th>
</tr>
<!-- <tr ng-repeat="item in fruits| orderBy:'-quantity'"> -quantity 降序排列-->
<!-- <tr ng-repeat="item in fruits| orderBy:['-quantity','price']"> -quantity 降序排列,在数量相同的情况下按照price的升序排列-->
<!-- <tr ng-repeat="item in fruits| orderBy:func"> 自定义排序-->
<tr ng-repeat="item in fruits| orderBy:['-quantity','price']">
<td>{{$index+1}}</td>
<td>{{item.name}}</td>
<td><input ng-model="item.quantity" /></td>
<td>{{item.price}}</td>
<td>{{item.quantity * item.price | currency}}</td>
<td><input type="button" ng-click="remove($index)" value="remove"/></td>
</tr>
</table>
</body>
</html>
类似资料：