angular入门几段代码（二） - 好文

<!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">
<input type="text" name="b" disabled="disabled"
value="2"> </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>

热门工具换一换