您的位置：首页 > Web前端 > AngularJS

AngularJs练习Demo2

2016-06-21 22:58 477 查看

@{
Layout = null;
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>ng工具类</title>
<script src="~/Scripts/angular.js"></script>
<script type="text/javascript" src="~/Scripts/js/index2.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="firstController">
{{name}}
{{isArray}}
{{name1}}
{{eq}}
</div>
<div ng-controller="threeController">
{{name}}
</div>
</div>
@*******动态初始化Model ↓**********@
<div id="div1" ng-controller="firstController">
{{name}}
</div>
<div id="div2" ng-controller="secondController">
{{name}}
</div>
<script type="text/javascript">
var app = angular.module("myApp", ['myApp3']);//threeController定义在Index2.js文件中
app.controller("firstController", function ($scope) {
$scope.name = "zhangsan";
$scope.arr = [1, 2, 3];
$scope.a = '111';
$scope.b = '222';
$scope.a1 = { name: "张三" };
$scope.b1 = { age: "10" };
$scope.isArray = angular.isArray($scope.arr);//判断是否是数组
$scope.name1 = angular.uppercase($scope.name);//转成大写
$scope.eq = angular.equals($scope.a, $scope.b);//判断两个字符串是否相等
$scope.c1 = angular.extend($scope.b1, $scope.a1);//b1继承a1
console.log($scope.b1);
var json = { "name": "hello", "age": "20" };
$scope.json = angular.toJson(json); //toJson 把json对象转换成字符串
$scope.json1 = angular.toJson(json, true);//第二个参数表示是否要格式化
var jsonStr = ' { "name": "hello", "age": "20" }';
$scope.jsonObj = angular.fromJson(jsonStr);//把字符串转化为对象

$scope.a2 = { name: "张三" };
$scope.b2 = { age: "10" };
$scope.c2 = angular.copy($scope.a2, $scope.b2); //把a2拷贝给b2，b2原有的值会被替换掉

var jsonObj = { "name": "hello", "age": "20" };
angular.forEach(jsonObj, function (val, key) {
console.log(val);
});

var result = [];
angular.forEach(jsonObj, function (val, key) {
this.push(val + key);
}, result);

//[bind]绑定对象作为函数的上下文
var self = { name: "张三" };
var f = angular.bind(self, function (age) {
$scope.info = this.name + " is" + age;
console.log($scope.info);
});
f(30);

//bind的另外一种写法
var f = angular.bind(self, function (age) {
$scope.info = this.name + " is" + age;
console.log($scope.info);
}, 30);
f();

});
//一个页面内不能定义两个ng-app的标签  ,bootstrap可以动态初始化model
var app1 = angular.module("myApp1", []);
var app2 = angular.module("myApp2", []);
app1.controller("firstController", function ($scope) {
$scope.name = "动态初始化model1";
});
app2.controller("secondController", function ($scope) {
$scope.name = "动态初始化model2";
});
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
document.onclick = function () {
angular.bootstrap(div1, ['myApp1']);
angular.bootstrap(div2, ['myApp2']);
}
</script>
</body>
</html>

var app2 = angular.module("myApp3", []);
app2.controller("threeController", function ($scope) {
$scope.name = "王五";
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航