joewright · April 19, 2017 20:31
diff --git a/ng-editable-multieselect.html b/ng-editable-multieselect.html
 <!DOCTYPE html>
 <html>
    <head>
        <title>Demo</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="description" content="Demo project">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <style type="text/css"></style>
    </head>
    <body ng-app="myApp" ng-cloak>
        <marquee behavior="alternate" direction="right"><h1>Angular editable multi-select test</h1></marquee>
        <div class="container">            
            <form class="form" ng-controller="AppCtrl">
                <div class="form-group">
                    <label for="selected-items">Selected Items</label>
                    <select ng-model="selectedItems" multiple name="selected-items" class="form-control" ng-options="item as item.name for item in items"></select>
                </div>
                <div class="form-group" ng-repeat="selected in selectedItems">
                    <label for="selected_{{ $index }}">Edit {{ selected.name }}</label>
                    <input type="text" class="form-control" ng-model="selected.name">
                </div>
            </form>
        </div>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
        <script type="text/javascript">
            (function(){
                angular.module('myApp', [])
                    .controller('AppCtrl', function($scope) {
                        $scope.items = [{
                            name: 'cat',
                            value: 'cat'
                        }, {
                            name: 'dog',
                            value: 'dog'
                        }, {
                            name: 'horse',
                            value: 'horse'
                        }, {
                            name: 'cow',
                            value: 'cow'
                        }, {
                            name: 'lemur',
                            value: 'lemur'
                        }];
                    });
            })();
        </script>
    </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Demo</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="description" content="Demo project">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<style type="text/css"></style>
	</head>
	<body ng-app="myApp" ng-cloak>
	<marquee behavior="alternate" direction="right"><h1>Angular editable multi-select test</h1></marquee>
	<div class="container">
	<form class="form" ng-controller="AppCtrl">
	<div class="form-group">
	<label for="selected-items">Selected Items</label>
	<select ng-model="selectedItems" multiple name="selected-items" class="form-control" ng-options="item as item.name for item in items"></select>
	</div>
	<div class="form-group" ng-repeat="selected in selectedItems">
	<label for="selected_{{ $index }}">Edit {{ selected.name }}</label>
	<input type="text" class="form-control" ng-model="selected.name">
	</div>
	</form>
	</div>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
	<script type="text/javascript">
	(function(){
	angular.module('myApp', [])
	.controller('AppCtrl', function($scope) {
	$scope.items = [{
	name: 'cat',
	value: 'cat'
	}, {
	name: 'dog',
	value: 'dog'
	}, {
	name: 'horse',
	value: 'horse'
	}, {
	name: 'cow',
	value: 'cow'
	}, {
	name: 'lemur',
	value: 'lemur'
	}];
	});
	})();
	</script>
	</body>
	</html>