45fan.com - 路饭网

搜索: 您的位置主页 > 网络频道 > 阅读资讯:angular入门几段代码(二)

angular入门几段代码(二)

2019-03-30 18:09:45 来源:www.45fan.com 【
<!DOCTYPE html>
<html lang="en">
<head>
<script src="../angular/angular1.4.6.min.js"></script>
<title></title>
</head>
<body>
<div ng-app="xk" ng-controller="ctl">
<select ng-options="v.value as v.name for v in arr" ng-model="city">
<option value="">请选择人员</option>
</select>
</div>
<script>
var m = angular.module('xk', []);
m.controller('ctl', ['$scope', function($scope){
$scope.city = '南昌';
$scope.arr = [
{name:'lalala', value:'南京'},
{name:'xk', value:'南昌'},
{name:'hh', value:'南方'},
];
}]);
</script>
</body>
</html>
<script>
var m = angular.module('xk', []);
m.controller('ctl', ['$scope', function($scope){
var obj = {'name':'lalala'};
angular.extend(obj, {'age':55, 'gender':'m'});//对象扩充

var arr = [
{name:'xk', age:55},
{name:'lalala', age:85},
{name:'hh', age:20}
];
angular.forEach(arr, function(v, k){//foreach循环
console.log(v)
console.log(k)
angular.forEach(v, function(value, key){//遍历对象
console.log(value);
});
});

//angular.copy()//深拷贝
$scope.data = {'name':'lalala'};//json格式数据
localStorage.setItem('data', angular.toJson($scope.data));//json对象转换成字符串
angular.fromJson(localStorage.getItem('data'));//将字符串转换成json对象
angular.fromJson('{"name":"lalala"}');

}]);
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<script src="../angular/angular1.4.6.min.js"></script>
<title></title>
</head>
<body>
<div ng-app="xk" ng-controller="ctl">
<label><input type="checkbox" ng-model="status">接受协议</label>
<button ng-init="copyright=false" ng-click="copyright=!copyright">查看协议</button><br/>
<textarea ng-if="copyright">这个协议是......</textarea><br/>
<button ng-disabled="!status">登录</button>
</div>
<script>
var m = angular.module('xk', []);
m.controller('ctl', ['$scope', function($scope){
}]);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<script src="../angular/angular1.4.6.min.js"></script>
<title></title>
</head>
<body>
<div ng-app="xk" ng-controller="ctl">
<ul>
<li ng-repeat="(key, value) in data" style="{{$odd?'color:red;':''}}">
姓名:{{value.name}} 年龄:{{value.ag}}
</li>
</ul>
</div>
<script>
var m = angular.module('xk', []);
m.controller('ctl', ['$scope', function($scope){
$scope.data = [
{name:'lalala',"age":55},
{name:'xk',"age":44},
{name:'hh',"age":22},
];
}]);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<script src="../angular/angular1.4.6.min.js"></script>
<title></title>
</head>
<body>
<div ng-app="xk" ng-controller="ctl">
性别:<select ng-model="user.gender">
<option value="">请选择性别</option>
<option ng-value="1" ng-selected="user.gender==1">男</option>
<option ng-value="2" ng-selected="user.gender==2">女</option>
</select>
<input type="radio" ng-model="user.gender" ng-value="1">男
<input type="radio" ng-model="user.gender" ng-value="2">女<br/>

<input type="checkbox" ng-model="copyright">
<input type="submit" ng-disabled="!copyright">

<input type="text" name="a" readonly="readonly" value="1"><!--readonly可以提交到后台-->
<input type="text" name="b" disabled="disabled" value="2"><!--disabled不能提交到后台-->
</div>
<script>
var m = angular.module('xk', []);
m.controller('ctl', ['$scope', function($scope){
$scope.user = {'gender':2}
}]);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<script src="../angular/angular1.4.6.min.js"></script>
<title></title>
</head>
<body>
<div ng-app="xk" ng-controller="ctl">
<input type="checkbox" ng-model="chekc">
<span ng-bind="!chekc?'全选':'取消'"></span><br/>
<input type="checkbox" ng-checked="chekc"><br/>
<input type="checkbox" ng-checked="chekc"><br/>
<input type="checkbox" ng-checked="chekc"><br/>
</div>
<script>
var m = angular.module('xk', []);
m.controller('ctl', ['$scope', function($scope){
}]);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<script src="../angular/angular1.4.6.min.js"></script>
<title></title>
</head>
<body>
<div ng-app="xk" ng-controller="ctl">
<input type="text" ng-model="title" ng-model-options="{updateOn:'default blur', debounce:{default:1000,blur:0}}">
{{title}}
</div>
<script>
var m = angular.module('xk', []);
m.controller('ctl', ['$scope', function($scope){
}]);
</script>
</body>
</html>

 

 
 

本文地址:http://www.45fan.com/a/question/100081.html
Tags: 入门 几段 Angular
编辑:路饭网
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部