Angularjs基础知识及示例汇总(2)

<div ng-style="{width:100+'px',height:200+'px',backgroundColor:'red'}">
  box
</div>

 

filter:过滤字段

复制代码 代码如下:

<div>{{9999|number}}</div> <!--9,999-->
<div>{{9999+1 |number:2}}</div><!--10,000.00-->
<div>{{9*9|currency}}</div><!--$81.00-->
<div>{{'hello world' | uppercase}}</div><!--HELLO WORLD-->

ng-template:可以加载模板

复制代码 代码如下:

<div ng-include="'tpl.html'"></div>

tpl.html

复制代码 代码如下:

<h1>hello</h1>

 

$http:一个类似ajax的方法很管用

复制代码 代码如下:

<div ng-controller="TestCtrl">
  <h2>HTTP请求-方法1</h2>
    <ul>
        <li ng-repeat="x in names">
        {{x.Name}}+{{x.Country}}
        </li>
    </ul>
</div>
<h2>方法2</h2>
  <div ng-controller="TestCtrl2">
     <ul>
        <li ng-repeat="y in info">
            {{y.aid}}+{{y.title}}
        </li>
     </ul>
</div>
<script>
//方法1
      var TestCtrl=function($scope,$http){
         var p=$http({
            method:'GET',
            url:'https://www.jb51.net/json/date.json'
         });
         p.success(function(response,status,headers,config){
            $scope.names=response;
         });
         p.error(function(status){
            console.log(status);
         });
      }
      //方法2
      function TestCtrl2($scope,$http){
        $http.get('json/yiqi_article.json').success(function(response){
             $scope.info=response;
        });
      }
</script>

以上所有的code:https://github.com/litengdesign/angularjsTest

实现的demo:

至于angularjs的路由（router）和指令（directive）下次本人将单独拿出来讲。

您可能感兴趣的文章: