AngularJS 表单是输入控件的集合
    以下 HTML input 元素被称为 HTML 控件:
    input、select、button、textarea 元素

AngularJS 表单 ng-model与ng-value使用

    <div ng-app="hd" ng-controller="_an" ng-cloak class="ng-cloak">
       // ng-model
       商品名： <input type="text" ng-model="goods.title"/><br/>
       价 格： <input type="text" ng-model="goods.price" readonly="readonly" /><br/>
       价 格： <input type="text" ng-model="goods.num" /><br/>
       // ng-valie
       总价： <input type="text" ng-value="  goods.price * goods.num" readonly="readonly"/>

    </div>

    <script src="./AngularJS.js"></script>
    <script>
        var m = angular.module('hd',[]);
        m.controller('_an',['$scope',function($scope){
            $scope.goods = {'title': '小米5','price':1750,'num':1};
        }]);

    </script>

AngularJS 操作表单单选框

    <div ng-app="hd" ng-controller="_an" ng-cloak class="ng-cloak">

        <input type="radio" ng-model="states" ng-value="1" /> 开启
        <input type="radio" ng-model="states" ng-value="0" /> 关闭

       <!--ng-show 为 true: 显示  为false: 隐藏--->
       <p ng-show="states == 0"><small>关闭原因：</small>网站数据迁移中</p>
    </div>

    <script src="./AngularJS.js"></script>
    <script>
        var m = angular.module('hd',[]);
        m.controller('_an',['$scope',function($scope){
         
            $scope.states = 1;
        }]);

    </script>

AngularJS 操作表单复选框

<div ng-app="hd" ng-controller="_an" ng-cloak class="ng-cloak">

  <input type="checkbox" ng-model="data.game"  ng-true-value="1" ng-false-value="0" /> 游戏
  <input type="checkbox" ng-model="data.video" ng-true-value="1" ng-false-value="0"/> 电影
        
  <!--ng-show 为 true: 显示  为false: 隐藏--->
   <p ng-show="data.game == 1">游戏</p>
   <p ng-show="data.video == 1">电影</p>
</div>
    <script src="./AngularJS.js"></script>
    <script>
        var m = angular.module('hd',[]);
        m.controller('_an',['$scope',function($scope){
            $scope.data= {'game': 0, 'video': 0};
        }]);
    </script>

AngularJS 操作表单下拉框
    ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表，但 ng-options 指令更适合创建下拉列表，它有以下优势：
    使用 ng-options 的选项的一个对象， ng-repeat 是一个字符串。

    <div ng-app="hd" ng-controller="_an" ng-cloak class="ng-cloak">

        <select ng-options="v.value as v.name for v in data" ng-model="_an">
            <option value="">--请选择--</option>
        </select>

    </div>

    <script src="./AngularJS.js"></script>
    <script>
      var m = angular.module('hd',[]);
      m.controller('_an',['$scope',function($scope){
          // 设置默认选择
        $scope._an='chongqing';
        $scope.data= [{name :'重庆',value:'chongqing'},{name :'秀山',value:'xiushan'}];
      }]);
    </script>

AngularJS---ng-selected、ng-disabled、ng-readonly实例

AngularJS---ng-selected实例操作

    
      <select ng-model="sex">
            <option ng-value="1">1</option>
            <!--ng-selected="true" 默认选中-->
            <option ng-value="2" ng-selected="true">2</option>
        </select>

AngularJS---ng-disabled实例操作

<input type="checkbox" ng-model="register" />注册协议<br/>
       
<!-- ng-disabled= true 注册按钮点击无效 为false 时 可以点击注册"-->
<button type="button" ng-disabled="!register">注册</button>

AngularJS---ng-readonly实例操作

 <div ng-app="hd" ng-controller="_an" ng-cloak class="ng-cloak">

   <!---readonly="readonly" 数据不能修改 可以提交到服务器处理---->
   <!---disabled="disabled"  数据不能修改 也不可提交---->
   <!---ng-readonly="goods.gid" 设定一个值来判断是修改还是添加---->
            
   email:<input type="text" readonly="readonly" ng-model="goods.email"/><br/><br/>
   num:<input type="text" disabled="disabled" ng-model="goods.num"/>
   price<input type="text" ng-readonly="goods.gid" ng-model="goods.price" />

 </div>

    <script src="./AngularJS.js"></script>
    <script>
        var m = angular.module('hd',[]);
        m.controller('_an',['$scope',function($scope){
          $scope.goods ={'gid': 1,'price':15,'num':10,'email':'[email protected]'};
        }]);

    </script>