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://code.jquery.com/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat="Item in Items" ng-init="GetCollectionName(Item.CollectionID)">
    <div class="row">
      <div class="col-sm-3">{{Item.Id}}</div>
      <div class="col-sm-3">{{Item.Desc}}</div>
      <div class="col-sm-6">{{CollectionName[Item.CollectionID]}}</div>
    </div>
  </div>
</body>
</html>
 
var app = angular.module("myApp", [])
.controller("myCtrl", ["$http", "$scope", "$q", function ($http, $scope, $q) {
  $scope.Items = [
    {
      Id: 1,
      Desc: "One",
      CollectionID: 1
    },
    {
      Id: 2,
      Desc: "Two",
      CollectionID: 1
    },
    {
      Id: 3,
      Desc: "Three",
      CollectionID: 2
    },
    {
      Id: 4,
      Desc: "Four",
      CollectionID: 3
    }
  ];
  $scope.CollectionName = {};
  $scope.GetCollectionName = function (CollId) {
    $http.get('/' + CollId)
      .then(function (result) {
      var data = {
        "1": "Collection 1",
        "2": "Collection 2",
        "3": "Collection 3"
      }
      result.data = data[CollId];
      $scope.CollectionName[CollId] = result.data;
    });
  }
}]);
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers