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="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
    
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-app="a">
  <div ng-controller="ListController">
    <ul>
        <li ng-repeat="item in items"> <a ng-click="getId(item)">{{item.content}}</a>
​
        </li>
    </ul>
    <br>
    <!--br>Name:
    <input ng-model="activeItem.name">
    <br>Content: Name:
    <input ng-model="activeItem.content">
    <br>
    <button ng-click="addItem()">Add</button-->
   </div>
  
  <div class="modal hide fade" id="mymodel">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h1>Add Element</h1>
  </div>
  <div class="modal-body">
    <form >
        <label>Name:</label><input type="text" class="span3" ng-model="activeItem.name"></br>
        <label>Content Name:</label><input type="password" class="span3" ng-model="activeItem.content"></br>
        <button type="submit" class="btn btn-success" ng-click="addItem()">Add In List</button>
        <button type="reset" class="btn ">Clear</button>
    </form>
  </div>
  <div class="modal-footer">
   <a class="btn" data-dismiss="modal" aria-hidden="true">close</a>
  </div>     
</div>
​
<a class="btn" data-toggle="modal" href="#mymodel">Add Contend</a>
​
​
​
</body>
</html>
 
var myApp = angular.module('a',[]);
​
myApp.controller('ListController',  function($scope) {
   $scope.items = [];
    $scope.activeItem = {
      id:'',
        name: '',
        content: ''
    };
​
    $scope.addItem = function () {
        $scope.activeItem.id = $scope.items.length + 1;
        $scope.items.push($scope.activeItem);
        $scope.activeItem = {}; /* reset active item*/
​
    };
    
    $scope.getId = function (item) {
        alert('ID: '+item.id);
​
    };
​
});
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers