I'm very new in Angular but I start to make a task and I'm looking for help in design.
I need that on every select update new one blue box will be added on the page.
index.html
<div class="col-md-3 col-md-offset-9" ng-controller="selectController"> <select class="form-control" ng-model="selectedItem" ng-options="item.Title for item in items" ng-change="clickOnOption()"> <option label="" value="">Nothing selected</option> </select> </div> <div class=" col-md-12 boxes-container"></div> app.js
// MODULE var creatorApp = angular.module('creatorApp', []); // CONTROLLERS creatorApp.controller('selectController', ['$scope', function ($scope) { $scope.items = [ {ID: '1', Title: 'Plan 1'}, {ID: '2', Title: 'Plan 2'}, {ID: '3', Title: 'Plan 3'}, {ID: '4', Title: 'Plan 4'}, ]; $scope.selectedItem = ''; $scope.clickOnOption = function(){ console.log($scope.selectedItem.Title); //old noble jquery $('.boxes-container').append('<div class="col-md-3" style="height: 30em; background-color:#0000FF;"></div><div class="col-md-1"></div>'); }; }]); So I feel like something wrong in my code, I started use jquery again and it looks like I need to use directive or something like that. But how I can understand I should use directive in my case.
Sorry for my noob question. But I'm really confused with directives in Angular.
update Sorry, but I didn't see something new for me in a related topic. From the topic: If you don't know, ask!
ng-repeat. You just tell it what data to repeat on and the controller adds to that data. You don't have to worry about manipulating the DOM. Your template describes what the DOM should do and the controller gives it the parameters to do it.