跳到主要內容

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>
標籤：

留言

張貼留言

這個網誌中的熱門文章

java西元民國轉換_各種不同格式

作者： 匿名
張貼留言
閱讀完整內容

C#資料庫操作(新增、修改、刪除、查詢)

作者： 匿名
張貼留言
閱讀完整內容

【Excel好好玩】 自己的資產自己管！善用Google Sheet來幫我們評估貸款

作者：
這次介紹的主題是關於Excel的貸款還款計畫試算，我們人生中總會遇到需要大筆金額的花費，但當資金不夠時就得進行貸款，而貸款之前如果我們能夠審慎評估，並分析自己的還款能力之後在進行凍作，相信風險會小很多，因此就自己動動手來使用Google Sheet進行試算吧！ 基本資料 ● 貸款總額: 1000000 ● 貸款期數: 84月 ● 年利率: 2.11% ● 月利率: 0.18% P.S 月利率 = 年利率 / 12 重要函式 PMT : 這是Google Sheet內建的重要年金計算公式，我們可以善用這個公式來計算固定利率及期數的固定攤還本息。因為PMT函式計算出的結果為負數，所以前面加上-號轉成正數。 動手做 首先我們在Excel表上列出我們的基本資料 圖片來源 其中月利率的部分就使用公式「=B4/12」 接著我們填上第一列的期數跟餘額 圖片來源 =B2 =B3 使用關鍵PMT函數來計算本息的部分 因為PMT函式計算出的結果為負數，所以前面加上-號轉成正數。 -PMT(貸款利率(月利率), 貸款期數, 貸款總額) =-PMT($B$5,$B$3,$B$2) 圖片來源 計算利息 利息 = 貸款餘額 x 月利率 =B8*$B$5 圖片來源 計算本金 本金 = 本息 - 利息 =C8-D8 圖片來源 製作第二列餘額的部分 餘額的部分 = 上一期的餘額 - 上一期的本金 圖片來源 接著拖曳該兩列往下拉，即可查看每一期的利息與本金 圖片來源 結語 雖然市面上已經有很多貸款銀行都提供了試算功能，但如果我們想要進一步管理自己的資產時，就需要將每一期的金額給計算出來，因此才會將公式運用在Excel表，讓我們的資產管理表能夠結合負債，進一步評估我們理財行動的下一步，希望這樣的經驗可以幫助到正在理財道路上打拼的夥伴，讓我們透過有效的管理，幫助荷包長大吧！ 喜歡撰寫文章的你，不妨來了解一下： Web3.0時代下為創作者、閱讀者打造的專屬共贏平台 — 為什麼要加入？ 歡迎加入一起練習寫作，賺取知識，累積財富！
張貼留言
閱讀完整內容