NG筆記7-以清單方式呈現資料

MVVM基本功,KO範例4 - 以清單方式呈現資料

<!DOCTYPE html>
<html ng-app="sampleApp">
 
<head>
  <meta charset="utf-8">
  <title>Lab 4 - 物件陣列繫結清單顯示</title>
    <style>
        table { width: 400px }
        td,th { border: 1px solid gray; text-align: center }
        a.btn { text-decoration: underline; cursor: pointer; color: blue; }
    </style>  
</head>
<body ng-controller="defaultCtrl">
  <input type="button" value="新增User" ng-click="model.addUser()" />
<span>{{ model.users.length }}</span> 筆, 
  合計 <span>{{ model.calcTotalScore() | number:0 }}</span>
  <table>
    <thead>
      <tr>
        <th>Id</th>
        <th>姓名</th>
        <th>積分</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="user in model.users">
        <td><span>{{ user.id }}</span>
        </td>
        <td><span>{{ user.name }}</span>
        </td>
        <td><span style='text-align: right'>{{ user.score }}</span>
        </td>
        <td><a ng-click="model.removeUser(user)" class="btn">移除</a>
        </td>
      </tr>
    </tbody>
  </table>
  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js"></script>
  <script>
    angular.module("sampleApp", [])
    .controller("defaultCtrl", function($scope) {
 
      //很簡單的User資料物件
      function UserViewModel(id, name, score) {
        var self = this;
        self.id = id;
        self.name = name;
        self.score = score;
      }
 
      function myViewModel() {
        var self = this;
        self.users = [];
        self.removeUser = function(user) {
          self.users.splice(self.users.indexOf(user), 1);
        };
        var c = 3;
        self.addUser = function() {
          var now = new Date(); //用時間產生隨機屬性值
          self.users.push(new UserViewModel(
              "M" + c++,
              "P" + "-" + now.getSeconds() * now.getMilliseconds(),
              now.getMilliseconds()));        
        };
        self.calcTotalScore = function() {
          var sum = 0;
          $.each(self.users, function(i, user) {
            sum += user.score;
          });
          return sum;
        };
      }
      vm = new myViewModel();
      vm.users.push(
        new UserViewModel("M1", "Jeffrey", 32767));
      vm.users.push(
        new UserViewModel("M2", "Darkthread", 65535));
      $scope.model = vm;
      
    });
  </script>
</body>
 
</html>

Live Demo

在NG,ng-repeat="item in array"相當於KO的data-bind="foreach: array",但有兩點差異:

1) ng-repeat標註在重複出現的元素上(例如: <li>, <tr>),而KO foreach則寫在容器元素(例如: <ul>, <tbody>
2) ng-repeat用"item in array"為陣列元素指定臨時命名(即"item"),迴圈內用item.propName繫結

至於積分加總,寫一個計算函數跑迴圈就好,只要新增、刪除陣列元素動作寫在ng-click事件內,NG都能感應到變化自動重算。

繼續看KO範例5 - 即時反應物件屬性變化,如果陣列元素未增減,只是數值改變,NG也會重新加總嗎? 答案是: 會! 加總函數維持不變,加入改分數按鈕,單筆數字改變也會自動重算,請看Live Demo

[NG系列]
http://www.darkthread.net/kolab/labs/default.aspx?m=post&t=angularjs
歡迎推文分享:
Published 23 June 2014 07:00 AM 由 Jeffrey
Filed under:
Views: 6,539



意見

# AYS said on 09 September, 2015 12:12 AM

想請問一下,利用ng-repeat產生的input欄位跟ng-repeat取自json array的值之間的即時運算結果,算出單筆總合的話直接算就好,但要算出每一個欄位的值總合的話我該怎麼寫?

(有圖比較好懂)

http://1drv.ms/1Q08X4B

# Jeffrey said on 09 September, 2015 08:34 AM

to AYS, 加總可參考範例的calcTotalScore函式,它在有任何風吹草動(修改數字、按按鈕…)時就會重算,如果對效率要求不要太高求,它的邏輯非常單純,資料在一兩百列以下的情境應可適用。

# AYS said on 09 September, 2015 09:00 AM

謝謝,我一定是當時腦子壞了才問這麼基本的問題= =|||

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<June 2014>
SunMonTueWedThuFriSat
25262728293031
1234567
891011121314
15161718192021
22232425262728
293012345
 
RSS
創用 CC 授權條款
【廣告】
twMVC
最新回應

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication