1 AngularJS语法相关
1.1 ng_app , ng_bind , ng_model , {{ }} 案例演示
ng_app：
ng-app 指令定义了 AngularJS 应用程序的 根元素。
ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。
ng-app 可以通过一个值（比如 ng-app="myModule"）连接到代码模块。
ng-model 指令：
ng-model 指令 绑定 HTML 元素 到应用程序数据。
ng-model 指令也可以： 为应用程序数据提供类型验证（number、email、required）。
为应用程序数据提供状态（invalid、dirty、touched、error）。
为 HTML 元素提供 CSS 类。 绑定 HTML 元素到 HTML 表单。
ng_bind 指令 等同于 {{ }} 绑定 HTML 元素到应用程序数据。
ng_bind 和 {{ }}
<!DOCTYPE html>
<html>
<body>
<div ng-app="">
<p>在输入框中尝试输入：</p>
<p>姓名：<input type="text" ng-model="name"></p>
<p>{{name}}</p>
<p ng-bind="name"></p>
</div>
<script src="angular.min.js"></script>
</body>
</html>
1.2 Angularjs表达式
AngularJS 表达式写在双大括号内：{{ expression }}。
AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。
AngularJS 将在表达式书写的位置"输出"数据。
AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。
实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
AngularJS 数组
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>第三个值为 {{ points[2] }}</p>
</div>
AngularJS 控制器 控制 AngularJS 应用程序的数据。
AngularJS 控制器是常规的 JavaScript 对象。
AngularJS 应用程序被控制器控制。
ng-controller 指令定义了应用程序控制器。
控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数 创建。
控制器的 $scope 是控制器所指向的应用程序 HTML 元素。
angular中$scope是连接controllers(控制器)和templates(模板view/视图)的主要胶合体。
我们可以把我们的model存放在scope上，来达到双向绑定。
$Scope原理.png
AngularJS 应用程序由 ng-app 定义。
应用程序在 <div> 内运行。
ng-controller 指令把控制器命名为 object。
函数 personController 是一个标准的 JavaScript 对象的构造函数。
控制器对象有一个属性：$scope.person。
person 对象有两个属性：firstName 和 lastName。
ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）。
<!DOCTYPE html>
<html>
<body>
<div ng-app="" ng-controller="personController">
名: <input type="text" ng-model="person.firstName"><br>
姓: <input type="text" ng-model="person.lastName"><br> <br>
姓名: {{person.fullName()}}
</div>
<script>
function personController($scope) {
$scope.person = {
firstName: "John",
lastName: "Doe",
fullName: function() {
var x = $scope.person;
return x.firstName + " " + x.lastName;
}
};
}
</script>
<script src="angular.min.js"></script>
</body>
</html>
2.具体功能代码
控制器实现
.controller('DataTargetNameCtrl', function($scope,$ionicScrollDelegate,$state,$stateParams,$http,$ionicLoading,url) {
//具体功能实现代码
}
回调成功判断
//查询DataTargetName成功回调
$scope.sucCallback=function(items){
console.log(items);
if(parseInt(items.errorcode)==0){
$scope.network_error=false;
if(items.resultdata){
if(items.resultdata.data){
$scope.no_DataTargetName=false;
$scope.has_DataTargetName=true;
$scope.DataTargetNames=items.resultdata.data;
}
else{
$scope.no_DataTargetName=true;
$scope.has_DataTargetName=false;
}
}
}
else if(parseInt(items.errorcode)==99){
$scope.network_error=true;
}
$ionicLoading.hide();
}
//查询科技人才担保记录失败回调
$scope.failCallback=function(items){
$scope.network_error=true;
$ionicLoading.hide();
}
进入页面前后定义操作
//进入页面之前
$scope.$on('$ionicView.beforeEnter', function() {
$scope.name=$stateParams.name;
GLOBAL_FROM_ITEM=true;
$scope.network_error=false;
$scope.no_DataTargetName=false;
$scope.has_DataTargetName=false;
});
//进入页面之后
$scope.$on('$ionicView.afterEnter', function() {
$scope.DataTargetName();
});
查询网络数据获取并进行传值操作
$scope.functionName=function(){
var u =url.getUrl("DataSpaceName","DataTargetName");
var object={};
object.id=$stateParams.pieid;
url.postUrl(u,object,"",$scope.sucCallback,$scope.failCallback);
}
HTML内AngularJS 多行列表定义
<div ng-if="has_TargetName" class="UDefineIt" ng-repeat="TargetName in TargetNames">
<div style="padding:0 10px;color:#000000;weight" class="UDefineIt">
<p>{{TargetName.TargetType}}</p>
</div>
<div style="padding:0 10px;color:#000000;" class="UDefineIt">
<br/>
<p>Line1<span style="float:right;color:#969696;">{{TargetName.Value1}} </span></p>
<p>Line2<span style="float:right;color:#969696;">{{TargetName.Value2}} </span></p>
<p>Line3<span style="float:right;color:#969696;">{{TargetName.Value3}} </span></p>
<p>Line4<span style="float:right;color:#969696;">{{TargetName.Value4}} </span></p><br/>
</div>
</div>
网友评论