首页 > 代码库 > Angular（ng表单指令操作）

Angular（ng表单指令操作）

2024-09-28 03:36:39   217人阅读

html部分

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

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

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

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

<input type="checkbox" ng-model="cbValue" ng-true-value="http://www.mamicode.com/YES" ng-false-value="http://www.mamicode.com/NO"><br>
{{cbValue}}<br>

<!--ng-radio ng-checked 指令用于设置复选框(checkbox)或单选按钮(radio)的 checked 属性-->
<input type="radio" ng-model="cameraName" value="http://www.mamicode.com/Canon">Canon<br>
<input type="radio" ng-model="cameraName" value="http://www.mamicode.com/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="http://www.mamicode.com/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=http://www.mamicode.com/‘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‘;

});

Angular（ng表单指令操作）


联系
我们