Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html ng-app="app">
<head>
​
  <meta charset="utf-8">
  <title>ngRepeat DOM重覆使用測試 2</title>
  <style>
    .list {
       width: 300px;
    }
    .list td {
      border: 1px solid gray;
    }
    input { display: block; margin-top: 6px}
  </style>
</head>
<body ng-controller="ctrl as vm">
  <table class="list">
    <tr ng-repeat="player in vm.players">
      <td ng-bind="player.id"></td>
      <td ng-bind="player.name"></td>
      <td ng-bind="player.score"></td>
      <td ng-bind="player.$$hashKey"></td>
    </tr>
  </table>
  <input type="button" value="第二筆染色(by jQuery)" ng-click="vm.color2ndRow()" />
  <input type="button" value="變更第二筆分數" ng-click="vm.changeScore()" /> 
  <input type="button" value="第二筆移至最後" ng-click="vm.move2ndRow()" />
  <input type="button" value="依分數排序" ng-click="vm.sortArray()" />
  <input type="button" value="重新產生陣列" ng-click="vm.updatePlayers()" />
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.js"></script>
  <script>
    function Player(id, name, score) {
      this.id = id;
      this.name = name;
      this.score = score;
    }
    function getPlayers() {
      return [
        new Player("A01", "Spider-Man", 63),
        new Player("A02", "Iron Man", 127),
        new Player("A03", "Jeffrey", 255),
        new Player("A04", "Darkthread", 32767)
      ];
    }
    function myViewModel($scope) {
      var self = this;
      self.players = getPlayers();
      self.color2ndRow = function() {
        $(".list tr:eq(1)").css("color", "red");
      };
      self.changeScore = function() {
        self.players[1].score = 0; //修改第二筆分數
      };
      self.move2ndRow = function() {
        var removed = self.players.splice(1, 1)[0];
        self.players.push(removed); //移動第二筆至最後
      };
      self.sortArray = function() {
        //依分數排序
        self.players.sort(function(a, b) { return a.score > b.score; })
      };
      self.updatePlayers = function() {
        self.players = getPlayers();
      };
    }
    angular.module("app", [])
    .controller("ctrl", myViewModel);
  </script>
</body>
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
darkthreadpro
0viewers