AngularJS_Bind

by Ashley li

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
      <div class="well span6" style="margin-top:20px;" ng-app="app" ng-controller="PhaseCtrl">
       <h2 ng-repeat-start="time in period" style="margin-bottom:20px;">{{time.name}} <h3>{{time.startyear}} - {{time.endyear}}</h3></h2>
       
        <div ng-controller="PeopleCtrl" >
                <div class="alert alert-info" ng-repeat-start="musician in musicians  | filter:time.name" ng-hide="musician.editing">
                   <div  ng-dblclick="musician.editing=true;">  <!--點兩下 ==>編輯模式=true ==>隱藏-->    
                    <h4>{{musician.chName}} ({{musician.name}}) </h4>
                        <span class="badge badge-important age">{{musician.age}}歲</span>
                        <button type="button" class="close" ng-click="remove($index);"><i class="icon-large icon-remove"></i></button>
                    </div>
                  <span style="font-size:medium;margin-top:3px;">{{musician.birthday}} - {{musician.die}}</span>    
                </div>
                <!--update-->
                <div ng-show="musician.editing" >
                    <input type="text" class="input-large" ng-model="musician.chName" />
                <input type="text" class="input-large" ng-model="musician.name" />
                <input type="number" class="input-small" ng-model="musician.age" />
                <!--點編輯按鈕 編輯模式結束-->
                <button type="button" class="btn" ng-click="musician.editing=false;" style="display:inline-block;margin-top:-4px;">Update</button>
                </div>

                 <div class="progress progress-striped active" ng-repeat-end ng-hide="musician.editing">
                        <div  class="bar" style="width:{{musician.age}}%;"></div>
                    </div>
    </div> 
    <!-- 年代結尾-->
 <div ng-repeat-end></div>

</div>

JavaScript

var app = angular.module('app', [])
 app.controller('PhaseCtrl',function($scope){
  $scope.period = [
                  { name: '巴洛克時期', startyear: 1600, endyear: 1750 },
                  { name: '古典時期', startyear: 1730, endyear: 1820 },
                  { name: '浪漫時期', startyear: 1830, endyear: 1850 },
                  ];
     
 });

      app.controller('PeopleCtrl',function($scope){
      $scope.musicians=[
      {name:'Johann Sebastian Bach' , chName:'巴赫',period:'巴洛克時期',birthday:'1685-03-21',die:'1750-07-28',age:65},
       {name:'Antonio Lucio Vivaldi' , chName:'韋瓦第',period:'巴洛克時期',birthday:'1678-03-04',die:'1741-07-28',age:63},
      
        {name:'Wolfgang Amadeus Mozart' , chName:'莫札特',period:'古典時期',birthday:'1756-01-27',die:'1791-12-05',age:35},
       {name:'Ludwig van Beethoven' , chName:'貝多芬',period:'古典時期',birthday:'1770-12-16',die:'1827-03-26',age:57},
      
       {name:'Ludwig van Beethoven' , chName:'蕭邦',period:'浪漫時期',birthday:'1810-03-01',die:'1849-10-17',age:39},
       {name:'Giuseppe Fortunino Francesco Verdi',chName:'威爾第',period:'浪漫時期',birthday:'1813-10-10',die:'1901-01-27',age:88},
  ];
     $scope.remove=function(index){
     $scope.musicians.splice(index,1);
     };

     
      });