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>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  </head>
  <body ng-app="myModule">
    <div>
      <select ng-model="item" ng-change="update(item)" ng-controller="dropdown">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
      </select>
      <table ng-controller="repeatTest ">
        <tr>
          <td>name</td>
          <td>family name</td>
          <td>score</td>
        </tr>
        <tr ng-repeat="item in list">
          <td>{{ item.name }}</td>
          <td>{{ item.familyName }}</td>
          <td>{{ item.score }}</td>
        </tr>
      </table>
    </div>
  </body>
</html>
 
var app = angular.module('myModule', []);
​
app.service('sharedService', function() {
  this.list = [];
});
​
app.controller('dropdown', function($scope, sharedService) {
  $scope.update = function(item) {
    console.log(item);
    if (item == "volvo") {
      sharedService.list = [ {
        name : 'A',
        familyName : 'AA',
        score : '10'
      }, {
        name : 'B',
        familyName : 'BB',
        score : '5'
      } ];
​
      $scope.list = sharedService.list;
      console.log($scope.list);
    } else {
      sharedService.list = [ {
        name : 'BMW',
        familyName : 'Germany',
        score : '100'
      }, {
        name : 'Frari',
        familyName : 'America',
        score : '100'
      } ];
      $scope.list = sharedService.list;
    }
  };
});
​
app.controller('repeatTest', function($scope, sharedService) {
  sharedService.list = [ {
    name : 'xxx',
    familyName : 'xxx',
    score : 'xxx'
  }, {
    name : 'xx',
    familyName : 'xx',
    score : 'xx'
  } ];
​
  $scope.list = sharedService.list;
  $scope.$watch(function() {
    return sharedService.list;
  }, function(newVal) {
    $scope.list = newVal;
  });
});
Output

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

Dismiss x
public
Bin info
eliagentilipro
0viewers