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‘;
});
时间： 2024-10-28 21:21:26