zoukankan      html  css  js  c++  java
  • 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;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';

    });
  • 相关阅读:
    idea从零搭建简单的springboot+Mybatis
    关于监听微服务功能
    final
    mysql数据库分页查询优化
    Mysql中“select ... for update”排他锁(转)
    HashMap(常用)方法个人理解
    5.1 Object类型
    5.3 Date类型
    4.1-4.2 基本类型及引用类型,执行环境及作用域
    20.JSON
  • 原文地址:https://www.cnblogs.com/YoogaChan/p/6920948.html
Copyright © 2011-2022 走看看