controllers.controller('popUpConfigCtrl', ['$scope', function ($scope) {
// Model templates
$scope.templates = [
{ name: 'container', url: 'templates/widgets/add-pop-up/config/settings.html'},
{ name: 'text', url: 'templates/widgets/add-pop-up/config/text.html'},
{ name: 'input', url: 'templates/widgets/add-pop-up/config/input.html'},
{ name: 'submit', url: 'templates/widgets/add-pop-up/config/submit.html'},
];
// The default template
$scope.template = $scope.templates[0];
// Model options
$scope.options = [
{ name: 'Text', value: 1 },
{ name: 'Large text', value: 2 },
{ name: 'Field', value: 3 },
{ name: 'Multiline field', value: 4 },
{ name: 'Button-submit', value: 5 },
];
// Selected by default
$scope.selected = $scope.options[0];
// The model lyrics
$scope.textElements = [
{id: '00001', text: 'Enter text', color: '#000'},
{id: '00002', text: 'Test text', color: '#333'}
];
// Function to change the template
$scope.choiceElement = function (e) {
e.the stoppropagation();
var type = e.currentTarget.dataset.type;
var id = e.currentTarget.dataset.id;
angular.forEach($scope.templates, function (val) {
if (type === val.name)
$scope.template = val;
});
};
}]);
<div class="title-config">
<h6>Text</h6>
<a href class="link-config">Delete</a>
</div>
<div class="form-container">
<div class="title-form">
<h6>General settings</h6>
</div>
<div class="input-row">
<label>Text</label>
<textarea ng-model="$parent.textElements[0].text"></textarea>
</div>
<div class="title-form">
<h6>text Settings</h6>
</div>
<div class="input-row">
<label>Color</label>
<input type="text" class="color">
</div>
<div class="input-row slider-i">
<label>Size</label>
<div slider class="slider">
<div class="thumb"></div>
</div>
<input type="text">
</div>
<div class="input-row">
<label>Font</label>
<select>
<option value>Arial</option>
<option value>Tahoma</option>
<option value>Verdana</option>
<option value>Times New Roman</option>
</select>
</div>
<div class="input-row">
<label>Alignment</label>
<select>
<option value>Left</option>
<option value>center</option>
<option value>Right</option>
</select>
</div>
<div class="title-form">
<h6>Indent</h6>
</div>
<div class="input-row slider-i">
<label>Bottom</label>
<div slider class="slider">
<div class="thumb"></div>
</div>
<input type="text">
</div>
</div>
<div class="widget pop-up" data-type="container" ng-click="choiceElement($event)">
<a href class="close"></a>
<div class="line text" data-type="text" data-id="00001" ng-click="choiceElement($event)" ng-bind="textElements[0].text"></div>
<div class="line text" data-type="text" data-id="00002" ng-click="choiceElement($event)" ng-bind="textElements[1].text"></div>
<div class="line input" data-type="input" ng-click="choiceElement($event)">
<input type="text" placeholder="Name*">
</div>
<div class="line input" data-type="input" ng-click="choiceElement($event)">
<input type="text" placeholder="Phone*">
</div>
<div class="line submit" data-type="submit" ng-click="choiceElement($event)">
<button>Call me</button>
</div>
</div>
Find more questions by tags AngularJavaScript