AngularJS：ng-click、ng-dblclick、add delete item to object、動態新增、修改、刪除

職稱： 姓名：
重要度： 經驗值：
技能：

★ {{ title}}{{member.name}}→[{{member.skills.join(', ')}} ] ★

{{ member.experience}}%

精簡版：http://jsbin.com/zagafi/1/edit
完整版：http://jsbin.com/vopuj/1/edit

一、首先設計新增的介面。

<div class="isa_info" style="margin-bottom:20px;background-color:  #FFFFF4;">
                    職稱：
                    <input type="text" id="txtRole" placeholder="請輸入職稱" ng-model="pRole"/>
                    姓名：
                    <input type="text" id="txtRoleName" placeholder="姓名" ng-model="pName"/>
                    <br />
                    重要度：
                    <input type="number" id="txtRoleImportance" placeholder="1~5" ng-model="pImportance"/>

                    經驗值：
                    <input type="number" id="txtRoleExperience" placeholder="1~100" ng-model="pExperience"/>
                    <br>
                    技能：
                    <input type="text" id="txtRoleSkills" placeholder="以逗號區隔如a,b..." ng-model="pSkills"/>
                    <br />
                    <button class="button blue" ng-click="add()">新增</button>
                </div>
然而我們可以順便設計controller內的add函式，其中skills欄位較特殊故須將之加以處理，以逗號分割多筆資料。

$scope.add = function() {//實作add函式
                             $scope.add = function() {//實作add函式
                            var skills = $scope.pSkills.split(",");
                            $scope.members[$scope.pRole] = {"name": $scope.pName, "importance": $scope.pImportance, "experience": $scope.pExperience, "skills": skills};
                        };

二、接著在設計顯示的畫面，與之前不同的是在加入了ng-dblclick並且觸發點擊兩下後自動show出背後隱藏的面板，而隱藏的面板主要用以修改功能，修改後按下Update可更新資料並回覆原面版。

<div ng-repeat="(title, member) in members">
                    <div ng-hide="member.editing" ng-dblclick="member.editing = true;">
                        <div  class="isa_info" style="width:100%;background-color:  #BDE5F8;height: 35px;color: #333;">
                            <button class="button green " style="float:right;font-size: 15px;" type="button" ng-click="remove(title);">&times;</button>
                            <span class="button red " style=" padding: 0px 0px;font-size: 24px;color:#FFF;border-radius: 15px;">
                                <span ng-repeat="n in []| getLoopTimes:member.importance">
                                    ★
                                </span>

                            </span>
                            {{ title}}{{member.name}}→[{{member.skills.join(', ')}} ]
                            <span  class="button red " style=" padding: 0px 0px;font-size: 24px;color:#FFF;border-radius: 15px;">
                                <span ng-repeat="n in []| getLoopTimes:member.importance">
                                    ★
                                </span>

                            </span>
                        </div>
                        <div class="progress" >
                            <span class="orange" style="width: {{ member.experience}}%;"><span>{{ member.experience}}%</span>
                        </div>
                    </div>

                    <div ng-show="member.editing">
                        <input type="text" ng-model="title">
                        <input type="text" ng-model="member.name">
                        <input type="text" ng-model="member.importance">
                        <input type="text" ng-model="member.experience">
                        <input type="text" ng-model="member.skills">
                        <button ng-click="member.editing = false;">Update</button>
                    </div>  

                </div>

而每個顯示的區塊中都包含了刪除的按鈕，故加入了下列按鈕程式碼。

<button class="button green " style="float:right;font-size: 15px;" type="button" ng-click="remove(title);">&times;</button>

此時我們在controller內也必須加入remove函式，刪除該行的key及values。

$scope.remove = function(key) {
                            delete $scope.members[key];
                        };

原始資料如同之前一般

$scope.members = {
                            '神射手': {
                                name: '迪文',
                                importance: 5,
                                experience: 98,
                                skills: ['二連矢', '銳利射擊']
                            },
                            '騎士領主': {
                                name: '賽依連',
                                importance: 5,
                                experience: 95,
                                skills: ['狂擊', '艾斯敦攻擊']
                            },
                            '十字刺客': {
                                name: '艾勒梅斯',
                                importance: 4,
                                experience: 95,
                                skills: ['音速攻擊', '黑暗瞬間']
                            },
                            '魔導師': {
                                name: '凱特莉娜',
                                importance: 4,
                                experience: 90,
                                skills: ['暴風雪', '咖般塔音']
                            },
                            '神工匠': {
                                name: '哈沃得',
                                importance: 3,
                                experience: 70,
                                skills: ['大地之擊', '金錢攻擊']
                            },
                            '神官': {
                                name: '瑪嘉雷特',
                                importance: 2,
                                experience: 60,
                                skills: ['治癒術', '天使之怒']
                            }
                        };

三、完整版程式碼：

<!DOCTYPE html>
<html>
    <head>
<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
        <link rel="stylesheet" href="https://aaad366b26125175724dd9c91cbade0cd1509dd0.googledrive.com/host/0B4GSVRY43FEXeUVOTlZNR0xqUkk/css/barAndInfo.css">
        <link rel="stylesheet" href="https://aaad366b26125175724dd9c91cbade0cd1509dd0.googledrive.com/host/0B4GSVRY43FEXeUVOTlZNR0xqUkk/css/button.css">
        <link rel="stylesheet" href="https://aaad366b26125175724dd9c91cbade0cd1509dd0.googledrive.com/host/0B4GSVRY43FEXeUVOTlZNR0xqUkk/css/searchbarAngular.css">
        <script language="javascript">
            
            var RoleApp = angular.module('RoleApp', [])
                    .controller('RoleCtrl', function($scope) {
                        $scope.members = {
                            '神射手': {
                                name: '迪文',
                                importance: 5,
                                experience: 98,
                                skills: ['二連矢', '銳利射擊']
                            },
                            '騎士領主': {
                                name: '賽依連',
                                importance: 5,
                                experience: 95,
                                skills: ['狂擊', '艾斯敦攻擊']
                            },
                            '十字刺客': {
                                name: '艾勒梅斯',
                                importance: 4,
                                experience: 95,
                                skills: ['音速攻擊', '黑暗瞬間']
                            },
                            '魔導師': {
                                name: '凱特莉娜',
                                importance: 4,
                                experience: 90,
                                skills: ['暴風雪', '咖般塔音']
                            },
                            '神工匠': {
                                name: '哈沃得',
                                importance: 3,
                                experience: 70,
                                skills: ['大地之擊', '金錢攻擊']
                            },
                            '神官': {
                                name: '瑪嘉雷特',
                                importance: 2,
                                experience: 60,
                                skills: ['治癒術', '天使之怒']
                            }
                        };
                        $scope.add = function() {//實作add函式
                            var skills = $scope.pSkills.split(",");
                            $scope.members[$scope.pRole] = {"name": $scope.pName, "importance": $scope.pImportance, "experience": $scope.pExperience, "skills": skills};
                        };
                        $scope.remove = function(key) {
                            delete $scope.members[key];
                        };
                    });
            RoleApp.filter('getLoopTimes', function() {
                return function(input, total) {
                    total = parseInt(total);
                    for (var i = 0; i < total; i++)
                        input.push(i);
                    return input;
                };
            });
        </script>
        <meta charset="utf-8">
        <title>JS Bin</title>
    </head>
    <body>
        <div id="RoleDiv" ng-app='RoleApp'>
            <div style="margin-top:20px;" ng-controller="RoleCtrl" >
                <div class="isa_info" style="margin-bottom:20px;background-color:  #FFFFF4;">
                    職稱：
                    <input type="text" id="txtRole" placeholder="請輸入職稱" ng-model="pRole"/>
                    姓名：
                    <input type="text" id="txtRoleName" placeholder="姓名" ng-model="pName"/>
                    <br />
                    重要度：
                    <input type="number" id="txtRoleImportance" placeholder="1~5" ng-model="pImportance"/>

                    經驗值：
                    <input type="number" id="txtRoleExperience" placeholder="1~100" ng-model="pExperience"/>
                    <br>
                    技能：
                    <input type="text" id="txtRoleSkills" placeholder="以逗號區隔如a,b..." ng-model="pSkills"/>
                    <br />
                    <button class="button blue" ng-click="add()">新增</button>
                </div>

                <div ng-repeat="(title, member) in members">
                    <div ng-hide="member.editing" ng-dblclick="member.editing = true;">
                        <div  class="isa_info" style="width:100%;background-color:  #BDE5F8;height: 35px;color: #333;">
                            <button class="button green " style="float:right;font-size: 15px;" type="button" ng-click="remove(title);">&times;</button>
                            <span class="button red " style=" padding: 0px 0px;font-size: 24px;color:#FFF;border-radius: 15px;">
                                <span ng-repeat="n in []| getLoopTimes:member.importance">
                                    ★
                                </span>

                            </span>
                            {{ title}}{{member.name}}→[{{member.skills.join(', ')}} ]
                            <span  class="button red " style=" padding: 0px 0px;font-size: 24px;color:#FFF;border-radius: 15px;">
                                <span ng-repeat="n in []| getLoopTimes:member.importance">
                                    ★
                                </span>

                            </span>
                        </div>
                        <div class="progress" >
                            <span class="orange" style="width: {{ member.experience}}%;"><span>{{ member.experience}}%</span>
                        </div>
                    </div>

                    <div ng-show="member.editing">
                        <input type="text" ng-model="title">
                        <input type="text" ng-model="member.name">
                        <input type="text" ng-model="member.importance">
                        <input type="text" ng-model="member.experience">
                        <input type="text" ng-model="member.skills">
                        <button ng-click="member.editing = false;">Update</button>
                    </div>  

                </div>



            </div> 
        </div>
    </body>
</html>

四、精簡版程式碼

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
    <script language="javascript">

angular.module('RoleApp',[])
  .controller('HelloCntl', function($scope) {
    $scope.friends = {
        john: {
            phone: '555-1276',
            address:'Taipei'
        },
        mary: {
            phone: '800-BIG-MARY',
            address:'chyiai'
        },
        mike: {
            phone: '555-4321',
            address:'kaisung'
        },
        adam: {
            phone: '555-5678',
            address:'unlin'
        },
        julie: {
            phone: '555-8765',
            address:'american'
        }
    };  
    $scope.add = function(){//實作add函式
      $scope.friends[$scope.pName] = {"phone":$scope.pPhone,"address":$scope.pAddress};
    };
    $scope.remove = function(key){
      delete $scope.friends[key];
    };
  }); 

      </script>
  </head>
  <body>


<div ng-app='RoleApp'>
 <div ng-controller="HelloCntl">
   <div style="margin-bottom:20px;">
   Name：
   <input type="text" id="name" placeholder="Name" ng-model="pName">
      <br />
   Phone：
   <input type="text" id="phone" placeholder="Phone" ng-model="pPhone">
      <br />
   Address：
   <input type="text" id="address" placeholder="Address" ng-model="pAddress">
   <br>
   <button ng-click="add()">Add</button>
   </div>
   
   <div ng-repeat="(data, friend) in friends">
     <div ng-hide="friend.editing" ng-dblclick="friend.editing=true;">
       <button type="button" ng-click="remove(data);">&times;</button>
       {{data}} @ {{friend.phone}}@{{friend.address}}  
     </div>  
     <div ng-show="friend.editing">
        <input type="text" ng-model="data">
  <input type="text" ng-model="friend.phone">
        <input type="text" ng-model="friend.address">
  <button ng-click="friend.editing=false;">Update</button>
     </div>  
  </div>
 </div>
</div>
    
  </body>
</html>