JSFiddle - React, Tailwind, and code Playground

by Ashley li

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
<!-- Insert -->
<div ng-app="app">
<div class="well span4" style="margin-top:20px;"  >
    <div class="alert alert-info">
      <select ng-model="ddlTime" ng-controller="PhaseCtrl" ng-options="time.name as ( time.name + '  [' + time.startyear +'~' + time.endyear +  ']' ) for time in period"> 
            <!--as for 表達式中用'(' ')'會出錯 -->
            <option value="">---請選擇年代---</option>
        </select>
       <!-- 把名稱及年齡組合成字串來當做下拉選單的選項內容
        但當某個選項被選到之後，因為被指定的 select 是  time.name 而不是原本的 period 物件喔
        {{ddlTime.name + '  ' +ddlTime.startyear + ' - ' + ddlTime.endyear }}-->
        <form ng-controller="PeopleCtrl">
        <label ng-model="addperiod" ng-show="ddlTime!=Null">{{ddlTime.name}}</label>
        <label class="control-label"for="nameEn" >Name :</label>
        <input id="addname" ng-model="addname"  placeholder="音樂家"  />
        <label class="control-label" for="chName">chName :</label><input id="addchName" ng-model="addchName"  placeholder="音樂家譯名" />
        <label class="control-label" for="age">age :</label><input type="number" id="addage" ng-model="addage" placeholder="年齡" />
        <label class="control-label" for="birth">birth :</label><input id="addbirth" ng-model="addbirth" placeholder="出生" />
        <label class="control-label" for="die">die :</label><input id="adddie" ng-model="adddie" placeholder="死亡" />
            <input type="submit" class="btn" ng-submit="add()" value="新增"/>
        </form>
    </div>
</div> 
   

      <div class="well span6" style="margin-top:20px;"  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">
      ...

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.add = function () {
                $scope.musicians.push({
                    name: $scope.addname,
                    chName: $scope.addchName,
                    age: $scope.addage,
                    birthday: $scope.addbirth,
                    die: $scope.adddie,
                    period:$scope.addperiod
                });
                $scope.addname = "";
                $scope.addchName = "";
                $scope.addage = "";
                $scope.addbirth = "";
                $scope.adddie = "";
                $scope.addperiod = "";
            };
     
     $scope.remove=function(index){
     $scope.musicians.splice(index,1);
     };

    
     
      });