【angularJS】学习笔记

一、一个html中多个ng-app

//对于ng-app初始化一个AngularJS程序属性的使用需要注意，在一个页面中AngularJS自动加载第一个ng-app，其他ng-app会忽略

//如果需要加载其他ng-app程序，需要手动添加初始化过程。

angular.bootstrap(document.getElementById("div2"), ['myApp2']);

angular.bootstrap(document,module,config); 正常参数是三个
第一个是dom对象，
第二个是模型对象，
第三个是配置。
这个module的名称可自己定义。

<div ng-app="myApp" ng-controller="myCtrl">

    <input type="text" ng-model="first"/>

    <input type="text" ng-model="last"/>

    <br/>

    姓名：{{ first + " " + last}}

</div>

<div id="userForm" ng-app="userForm" ng-controller="userController">

    <input type="text" ng-model="username"/><br/>

    <input type="text" ng-model="password"/><br/>

    用户名：{{username}}<br/>

    密码： {{password}}

</div>

<script type="text/javascript">

    var app = angular.module("myApp",[]);

    app.controller("myCtrl",function($scope){

        $scope.first = "test";

        $scope.last = "test";

    });

 
    var userApp = angular.module("userForm",[]);

    userApp.controller("userController",function($scope){

        $scope.username = "test";

        $scope.password = "test";

    });

    angular.bootstrap(document.getElementById("userForm"),['userForm']);

</script>

View Code

二、select选择框

　　AngularJS 可以使用数组或对象创建一个下拉列表选项。

使用 ng-options 指令来创建一个下拉列表，列表项通过对象和数组循环输出，

也可以使用ng-repeat 指令来创建下拉列表。

对比：

<select ng-model="selectedSite">
<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>
</select>
<h1>你选择的是: {{selectedSite}}</h1>  //selectedSite结果是x.url

 

<select ng-model="selectedSite" ng-options="x.site for x in sites">
</select>
<h1>你选择的是: {{selectedSite.site}}</h1>  //selectedSite结果是x
<p>网址为: {{selectedSite.url}}</p>

View Code

ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表，

但 ng-options 指令更适合创建下拉列表，它有以下优势：

使用 ng-options 选择的值是一个对象， ng-repeat 选择的值是一个字符串。

当选择值是一个对象时，我们就可以获取更多信息，应用也更灵活。

ngOptions用法详解，参考：https://www.cnblogs.com/laixiangran/p/4956751.html

ngOption针对不同类型的数据源有不同的用法，主要体现在数组和对象上。

数组：

label for value in array

select as label for value in array

label group by group for value in array

select as label group by group for value in array

select as label group by group for value in array track by trackexpr

对象：

label for ( key , value ) in object

select as label for ( key , value ) in object

label group by group for ( key , value ) in object

select as label group by group for ( key , value ) in object

　　说明：

array / object：数据源的类型，有数组和对象两种

value：迭代过程中，引用数组的项或者对象的属性值

key：迭代过程中，引用对象的属性名

label：选项显示的标签，用户可看到的

select：结果绑定到ngModel中，如果没有指定，则默认绑定value

group：group by的条件，表示按某条件进行分组

trackexpr：用于唯一确定数组中的迭代项的表达式

举例数组

$scope. supplierList = [
            { "ID": 0, "SupplierCode": 0, "SupplierName": "全部" },
          { "ID": 1, "SupplierCode": 0, "SupplierName": "金飞" },
           { "ID": 2, "SupplierCode": 0, "SupplierName": "喷飞" },
        ];
ng-options="item.ID as item.SupplierName for item in supplierList"

三、Table表格

　　ng-repeat 指令可以完美的显示表格。

<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>

　　如果需要对表格进行排序，我们可以添加 orderBy 过滤器:

<tr ng-repeat="x in names | orderBy : 'Country'">

angularjs table，点击行tr获取tr行数据

<tr ng-repeat="value in fahrplanList"  ng-click="outBoundTableClick(this)">
$scope.outBoundTableClick = function (index) {
                $scope.outBountData = $scope.outBoundDataList[index.$index];
}

也可以试下：

ng-click="setMemberEntityValue($index)"
$scope.setMemberEntityValue = function (index) {
var tds = $("input[name='member']").eq(index).parent().parent().find('td');

四、http post数据

　　1、数据传递问题：后端接收不到AngularJs中$http.post发送的数据，总是显示为null

检查了下，后台的模型，需要注意：

1、可序列化[DataContract(IsReference = true)] 、和用属性的方式，不要用字段

2、属性要和前端传递的完全一样。

Eg：

[DataContract(IsReference = true)]

    public class CKSVoyageSearchSelectModel

    {

        /// <summary>

        /// 前端路由key

        /// </summary>

        [DataMember]

        public string rkey { set; get; }

View Code

　　2、post多个参数

http.post 多个参数时：写在一块{}

Js代码：

var params = {

                    rkey: $scope.rkey,

                    rq: {

                        Head: {

                            Auth: "string",

                            Errcode: 0,

                            Errormessage: ""

                        },

                        Data: {

                            DepartureCode: $scope.condition.departure_code,

                            

                        },

                    }

                };

                offlineBookingService.searchVoyage(params).then(function (rs) {

View Code

后台控制器代码：

[FrontAuthenticationAttrbute]

        [HttpPost]

        public ActionResult SearchVoyage(CommonBO<VoyageRequest> rq,string rkey)

        {}

//不要出现有重载的函数

   public ActionResult SearchVoyage(CommonBO<VoyageRequest> rq)

        {}

View Code

五、输入验证

　　AngularJS 表单和控件可以提供验证功能，并对用户输入的非法数据进行警告。

　　参考：https://www.cnblogs.com/zml-java/p/5644260.html

属性	描述
$dirty	表单有填写记录
$valid	字段内容合法的
$invalid	字段内容是非法的
$pristine	表单没有填写记录

六、AngularJS API

　　AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合，如：

比较对象
迭代对象
转换对象

全局 API 函数使用 angular 对象进行访问。以下列出了一些通用的 API 函数：

API	描述
angular.lowercase()	转换字符串为小写
angular.uppercase()	转换字符串为大写
angular.isString()	判断给定的对象是否为字符串，如果是返回 true。
angular.isNumber()	判断给定的对象是否为数字，如果是返回 true。

$scope.$watch 监控模型变量：

$scope.$watch('passw1',function() {$scope.test();});

$scope.$watch('passw2',function() {$scope.test();});

$scope.$watch('fName',function() {$scope.test();});

$scope.$watch('lName',function() {$scope.test();});

$scope.test = function() {
  if ($scope.passw1 !== $scope.passw2) {
    $scope.error = true;
    } else {
    $scope.error = false;
  }

七、AngularJS 调试

参考：

Angular调试技巧——借助chrome上的Batarang插件

angular学习第一天——安装batarang踩到的那些坑儿