<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="mycontroller">
<div ng-repeat="directive in directives">
<dynamic-creation items="items" change="toggleChange"></dynamic-creation>
</div>
<button ng-click="addProduct(item)">add new product</button><br />
{{selectedItems}}
</body>
</html>
// Code goes here
var app = angular.module('myApp', []);
app.directive('dynamicCreation', function() {
var fields={};
fields.restrict= 'E';
fields.replace = true;
fields.templateUrl= 'dynamicFields.html';
fields.scope = {
items : '=items',
toggleChange : '=change'
}
return fields;
});
app.controller('mycontroller', function($scope) {
$scope.directives = [{}];
$scope.selectedItems = [];
$scope.items = [{'id':1,'name':'apple', 'price': 100},
{'id':2,'name':'orange', 'price':75},
{'id':3,'name':'lemon', 'price':50}]
$scope.toggleChange = function (item) {
var itemIndex = $scope.selectedItems.indexOf(item);
if(itemIndex != -1) {
$scope.selectedItems.splice($scope.selectedItems.indexOf(item), 1);
}
$scope.selectedItems.push(item);
};
$scope.addProduct = function (item){
$scope.directives.push({});
}
});
/* Styles go here */
<div class="item-text-wrap">
<label class="item item-input item-select">
<span class="input-label">Product</span>
<select ng-model="item" ng-options="item as item.name for item in items" ng-change="toggleChange(item)" class="col col-100"><option style="display:none" value="">select an item</option></select>
</label>
<label class="item item-input">
<span class="input-label">Price</span>
<input type="number" ng-model="item.price" placeholder="Select an item" ng-disabled="!item" />
</label>
</div>