Angularjs基础知识及示例汇总

<label for="name">name:</label>
<input type="text" ng-model="name" id="name"/>
<hr>
hello:{{name || 'liteng'}}

<div>
  单价：<input type="number" min=0 ng-model="price" ng-init="price=299">
  数量: <input type="number" min=0 ng-model="quantity" ng-init="quantity=1">  
  <br>
  总价：{{(price) * (quantity)}}
  <dt>
    <dl>注:</dl>
    <dd>涉及html5的input：<a href="http://www.w3school.com.cn/html5/att_input_type.asp">http://www.w3school.com.cn/html5/att_input_type.asp</a></dd>
    <dd>ng-init:设定初始值</dd>
  </dt>
</div>

<p ng-init="value='hello world'">{{value}}</p>

<div ng-init="friends=[{name:'Jhon',age:25},{name:'Mary',age:28}]"></div>
  <p>我有{{friends.length}} 朋友.他们是</p>
  <ul>
    <li ng-repeat="friend in friends">
      [{{$index+1}}]:{{friend.name}}年龄为：{{friend.age}}
    </li>
   </ul>

<div ng-controller="ctrl">
  <button ng-dblclick='showMsg()'>{{a}}</button>
</div>
<script>
    function ctrl($scope){
      $scope.a='hello';
      $scope.showMsg=function(){
        $scope.a='world';
      }
     }
  </script>

<div ng-show="!show">
  ng-show="!show"
</div>
<div ng-show="show">
  ng-show="show"
</div>

<div ng-hide="aaa">
  ng-hide="aaa"
</div>
<div ng-hide="!aaa">
  ng-show="!aaa"
</div>

<h2>toggle</h2>
  <a href ng-click="showLog=!showLog">显示logo</a>
  <div ng-show="showLog">
    <img ng-src="http://liteng.org/sites/default/files/logo.png" alt="">
  </div>

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

<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-->

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

<h1>hello</h1>

<div class="container" 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:'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>