Angular(ng表单指令操作)

html部分

.................................................

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Angular(ng表单指令操作)</title>

<script src="js/angular-1.3.0.js"></script>
<script src="js/t9.js"></script>
<style>
.rect {display:inline-block;height:48px;width:100px;}
</style>
</head>
<body ng-controller="MyCtrl">

<!--ng-checkbox ng-true-value="YES" ng-false-value="NO"-->
<!-- ng-checked 指令用于设置复选框(checkbox)或单选按钮(radio)的 checked 属性-->
<!--如果 ng-checked 属性返回 true,复选框(checkbox)或单选按钮(radio)将会被选中-->

<input type="checkbox" ng-model="cbValue" ng-true-value="YES" ng-false-value="NO"><br>
{{cbValue}}<br>

<!--ng-radio ng-checked 指令用于设置复选框(checkbox)或单选按钮(radio)的 checked 属性-->
<input type="radio" ng-model="cameraName" value="Canon">Canon<br>
<input type="radio" ng-model="cameraName" value="Nikon">Nickon<br>

<!--select ng-options 使用数组元素填充下拉列表 -->
选择你喜欢的相机:{{cameraName}} <hr>
<select ng-model="camera" ng-options="c.model group by c.make for c in cameras">
</select>
{{camera|json}}
<hr>
<label ng-repeat="color in colors">
{{color}}
<input type="radio" ng-model="myStyle['background-color']" ng-value="color" id="{{color}}">

</label>
<span class="rect" ng-style="myStyle" ></span>
<hr>

<!--ng-if 取消选中,并移除内容-->
<!--ng-checked 指令用于设置复选框(checkbox)或单选按钮(radio)的 checked 属性-->
<!--ng-style 指令为 HTML 元素添加 style 属性。-->
<!--ng-style 属性值必须是对象,表达式返回的也是对象。-->
<!--对象由 CSS 属性和值组成,即 key=>value 对。-->
是否显示msg:
<input type="checkbox" ng-model="checked" >
<p ng-if="checked" ng-bind="msg"></p>

<p>表达式</p>
<p>{{msg}}</p>

<hr>
验证$digest循环
<b>{{msg}}</b>

</body>
</html>

.................................................

js部分

var myApp=angular.module('myApp',[]);
myApp.controller('MyCtrl',function ($scope) {
$scope.cbValue='YES';
$scope.cameras=[
{make:'Canon',model:'700',price:4000},
{make:'Canon',model:'800',price:9000},
{make:'Nikon',model:'D7000',price:3800},
{make:'Nikon',model:'D7770',price:10000}
];

$scope.colors=['red','green','blue'];
$scope.myStyle={'background-color':'blue'};
$scope.msg='this is a test';

});
posted @ 2017-05-30 17:49  YoogaChan  阅读(181)  评论(0编辑  收藏  举报