I need to dynamically change controller of one particular div by clicking some input buttons.
Why it works the first way, but doesn't work the second way if I replace one-element array by controller itself (see code below).
And how to implement such functionality in a better way?
Plnkr with one-element array (works)
index.html
<body ng-app="myApp">
<div ng-controller="MyCtrl">
Hello, {{name}}!
<input type="button" value="click me" ng-click="changeCtrl(0)"/>
<input type="button" value="click me" ng-click="changeCtrl(1)"/>
<input type="button" value="click me" ng-click="changeCtrl(2)"/>
<div ng-repeat = "ctrl in curCtrl" ng-controller="ctrl">
{{ blah }}
</div>
</div>
</body>
</html>
script.js
var myApp = angular.module('myApp', []);
myApp.controller("MyCtrl", MyCtrl);
function MyCtrl($scope) {
$scope.name = 'Username';
$scope.ctrls = [ctrlA, ctrlB, ctrlC];
$scope.curCtrl = [ctrlA];
$scope.changeCtrl = function (idx) {
$scope.curCtrl = [$scope.ctrls[idx]];
}
}
function ctrlA($scope) {$scope.blah = "One";}
function ctrlB($scope) {$scope.blah = "Two";}
function ctrlC($scope) {$scope.blah = "Three";}
Plnkr with controller instead (doesn't work)
index.html
<body ng-app="myApp">
<div ng-controller="MyCtrl">
Hello, {{name}}!
<input type="button" value="click me" ng-click="changeCtrl(0)"/>
<input type="button" value="click me" ng-click="changeCtrl(1)"/>
<input type="button" value="click me" ng-click="changeCtrl(2)"/>
<div ng-controller="curCtrl">
{{ blah }}
</div>
</div>
</body>
</html>
script.js
var myApp = angular.module('myApp', []);
myApp.controller("MyCtrl", MyCtrl);
function MyCtrl($scope) {
$scope.name = 'Username';
$scope.ctrls = [ctrlA, ctrlB, ctrlC];
$scope.curCtrl = ctrlA;
$scope.changeCtrl = function(idx) {
$scope.curCtrl = $scope.ctrls[idx];
}
}
function ctrlA($scope) {$scope.blah = "One";}
function ctrlB($scope) {$scope.blah = "Two";}
function ctrlC($scope) {$scope.blah = "Three";}
It works with ng-repeat because ng-repeat destroys and re-compiles the HTML when the array reference changes. You would have to compile manually if you want the same result without an array, using the $compile service on the $element. It could be done in your controller, but a directive might be better.
You may also want to take advantage of client-side routing to accomplish this (ui-router allows nested states).
Check out these answers:
Dynamic NG-Controller Name
Dynamically assign ng-controller on runtime
Otherwise, you could use a quick hack with ng-if and $timeout:
$scope.changeCtrl = function(idx) {
// ng-if sees null and destroys the HTML
$scope.curCtrl = null;
$timeout(function() {
// ng-if sees a new object and re-compiles the HTML
$scope.curCtrl = $scope.ctrls[idx];
});
}
<div ng-if="curCtrl" ng-controller="curCtrl">
{{ blah }}
</div>
Related
I am trying that on a button click, a div and and input tag are created and the input tag contain ng-model and the div has binding with that input.
Kindly suggest some solution.
You can create the div and input beforehand and and do not show it by using ng-if="myVar". On click make the ng-if="true".
<button ng-click="myVar = true">
In controller : $scope.myVar = false;
$scope.addInputBox = function(){
//#myForm id of your form or container boxenter code here
$('#myForm').append('<div><input type="text" name="myfieldname" value="myvalue" ng-model="model-name" /></div>');
}
Here is another solution, in which there's no need to create a div and an input explicitly. Loop through an array of elements with ng-repeat. The advantage is that you will have all the values of the inputs in that array.
angular.module('app', [])
.controller('AppController', AppController);
AppController.$inject = ['$scope'];
function AppController($scope) {
$scope.values = [];
$scope.add = function() {
$scope.values.push('');
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="AppController">
<button ng-click="add()">Click</button>
<div ng-repeat="value in values track by $index">
<input type="text" ng-model="values[$index]"/>
<div>{{values[$index]}}</div>
</div>
<pre>{{values}}</pre>
</div>
UPDATE. And if you want only one input, it's even simpler, using ng-show.
angular.module('app', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<button ng-click="show = true">Click</button>
<div ng-show="show">
<input type="text" ng-model="value"/>
<div>{{value}}</div>
</div>
</div>
You should use $compile service to link scope and your template together:
angular.module('myApp', [])
.controller('MyCtrl', ['$scope', '$compile', '$document' , function MyCtrl($scope, $compile, $document) {
var ctrl = this;
var inputTemplate = '<div><span ng-bind="$ctrl.testModel"></span>--<span>{{$ctrl.testModel}}</span><input type="text" name="testModel"/></div>';
ctrl.addControllDynamically = addControllDynamically;
var id = 0;
function addControllDynamically() {
var name = "testModel_" + id;
var cloned = angular.element(inputTemplate.replace(/testModel/g, name)).clone();
cloned.find('input').attr("ng-model", "$ctrl." + name); //add ng-model attribute
$document.find('[ng-app]').append($compile(cloned)($scope)); //compile and append
id++;
}
return ctrl;
}]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.angularjs.org/1.6.2/angular.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl as $ctrl">
<input type="button" value="Add control dynamically" ng-click="$ctrl.addControllDynamically()"/>
</div>
</div>
UPDATE: to add a new compiled template each time the button is clicked, we need to make a clone of the element.
UPDATE 2: The example above represents a dirty-way of manipulating the DOM from controller, which should be avoided. A better (angular-)way to solve the problem - is to create a directive with custom template and use it together with ng-repeat like this:
angular.module('myApp', [])
.controller('MyCtrl', ['$scope', function MyCtrl($scope) {
var ctrl = this;
ctrl.controls = [];
ctrl.addControllDynamically = addControllDynamically;
ctrl.removeControl = removeControl;
function addControllDynamically() {
//adding control to controls array
ctrl.controls.push({ type: 'text' });
}
function removeControl(i) {
//removing controls from array
ctrl.controls.splice(i, 1);
}
return ctrl;
}])
.directive('controlTemplate', [function () {
var controlTemplate = {
restrict: 'E',
scope: {
type: '<',
ngModel: '='
},
template: "<div>" +
"<div><span ng-bind='ngModel'></span><input type='type' ng-model='ngModel'/></div>" +
"</div>"
}
return controlTemplate;
}]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.angularjs.org/1.6.2/angular.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl as $ctrl">
<input type="button" value="Add control dynamically" ng-click="$ctrl.addControllDynamically()"/>
<div ng-repeat="control in $ctrl.controls">
<control-template type="control.type" ng-model="control.value"></control-template>
</div>
</div>
</div>
I have HTML code with inline element:
<span class="title" ng-click="update()">Rock</span>
How to replace this element on input element after click for edit?
And then after push enter on input return back span element?
I tried with directives ng-hide(), ng-show(). But I wonder
You can use either
<span class="title" ng-hide="isEdited" ng-click="update()">Rock</span>
or
<span class="title" ng-show="!isEdited" ng-click="update()">Rock</span>
or even
<span class="title" ng-if="!isEdited" ng-click="update()">Rock</span>
In any case you will want to reference something that can be truthy. For example in your controller you would have something like this in your function
/*the init function just makes sure that everything is setup
and nothing caries over from any local storage or anything
else you may be using*/
init();
init function(){
$scope.isEdited = false;
}
$scope.update = function(){
$scope.isEdited = true;
}
What you need to do is set a variable that contains the state;
<html>
<body ng-app="app">
<div ng-controller="mainController as $ctrl">
<span ng-if="!$ctrl.isInEditMode" class="title" ng-click="$ctrl.update()" ng-bind="$ctrl.spanText"></span>
<div ng-if="$ctrl.isInEditMode">
<input type="text" placeholder="Value for rock" ng-model="$ctrl.spanText" />
<button ng-click="$ctrl.update()">Done</button>
</div>
</body>
</html>
angular.module('app', [])
.controller('mainController', function($scope) {
this.isInEditMode = false;
this.spanText = 'Rock';
this.update = (function() {
this.isInEditMode = !this.isInEditMode;
}).bind(this);
});
I have prepared a Codepen that shows an possible solution: http://codepen.io/stefferd/pen/QdQrrv
I have a problem to show INPUT field when do some action.
I have BUTTON (Click here) as soon as user made a click event on button i wanted to show input field
I have done this by using jQuery.
Can any one help me in Angular.js
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.boxShow = false;
});
</script>
<div ng-app="myApp">
<div ng-controller="myCtrl">
show box
<div ng-show="boxShow">
<textarea rows="4" cols="50">text</textarea>
</div>
</div>
</div>
https://jsfiddle.net/bxwjpmaa/1/
HTML
<div class="btn btn-primary" ng-click="openTextBox();">Click Me To open text box</div>
<div ng-show="openTextBox == true">
<input type="text"/>
</div>
SCRIPT :
$scope.openTextBox = function () {
$scope.openTextBox = true;
}
please don't take scope variables and function names same
example here
$scope.openTextBox = function () {
$scope.openTextBox = true;
}
//this is not correct as per angular documentation because scope.openTextBox name already assigned to scope function,again its assigning scope variable "$scope.openTextBox = true" here u will get errors when ever u clicked div second time" TypeError: boolean is not a function" it will throw this error.so please dont use which is already assigned scope function dont assign scope variable
see this fiddle url : https://jsfiddle.net/veerendrakumarfiddle/bxwjpmaa/2/
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<ol>
<li ng-repeat="element in elements">
<input type="text" ng-model="element.value"/>
</li>
</ol>
<br/>
<b>Click here to add Textbox:</b><br/><input type="button" value="New Item" ng-click="newItem()"/>
<br/>
<br/>
<b>Click here to see ng-model value:</b><br/>
<input type="button" value="submit" ng-click="show(elements)">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
var counter=0;
$scope.elements = [ {id:counter, value : ''} ];
$scope.newItem = function(){
counter++;
$scope.elements.push( { id:counter,value:''} );
}
$scope.show=function(elements)
{
alert(JSON.stringify(elements));
}
});
</script>
</body>
</html>
I want to manipulate items in an array stored in a parent controller. When I manipulate the items, I want to do this from within an ng-repeat loop inside a child controller.
As far as I can tell, the array in the parent controller is being updated - in fact s===cs. I have read that $scope.$apply() might be the answer but I'm not sure how to call that using the "controller as" syntax below - or if that is even wise.
<html ng-app='app'>
<body ng-controller='parent_controller as pc'>
{{ pc.parent_name }}
<br>
Enter parent_name <input ng-model='pc.parent_name'/>
<br>
<button ng-click='pc.change_parent_name()'>change parent_name</button>
<div ng-controller='child_controller as cc'>
<div ng-repeat='item in pc.myarray' style='border:1px solid #ccc; margin:20px;'>
Item = {{ item }}
<br>
<button ng-click='cc.change_item_name($index)'>change item name</button>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
<script type='text/javascript'>
var app = angular.module('app',[]);
function parent_controller(){
var self = this;
window.s = self; // For debugging
self.myarray = ['a','b','c'];
self.change_parent_name = function () {
self.parent_name = 'changed!!';
}
}
app.controller('parent_controller',[parent_controller]);
function child_controller() {
var self = this;
window.cs = self; // For debugging
parent_controller.apply(self, arguments);
self.change_item_name = function(index){
console.log(index);
self.myarray[index] = 'changed';
}
}
app.controller('child_controller',[child_controller]);
</script>
</body>
</html>
Since the array has primitive string type, pass in the parent array and index into the child controller function and it should work fine.
self.change_item_name = function(items, index){
console.log(index);
items[index] = 'changed';
}
And the html changes to:
<button ng-click='cc.change_item_name(pc.myarray,$index)'>change item name</button>
You would be better off putting the child controller on the ng-repeat, and then using that to update the parent controller. $scope.$apply is not necessary. If you want to update the parent controller from the controller code, you are better off using a service to communicate between the two.
Moving the data source from the parent controller to a service and injecting that service into both controllers allows them to access the same data. [AngularJS API reference]
This example does that and adds a third controller to highlight the extent to which the data is shared across controllers.
ctrl_3 below also shows how $scope can be accessed using controller as syntax. $scope is only used for the console.log part - it isn't used for this service approach.
<html ng-app='app'>
<body ng-controller='a_controller as ctrl_1'>
{{ ctrl_1.parent_name }}
<br>
Enter parent_name <input ng-model='ctrl_1.parent_name'/>
<br>
<button ng-click='ctrl_1.change_parent_name()'>change parent_name</button>
<div><strong>ctrl_2</strong></div>
<div ng-controller='a_controller as ctrl_2'>
<div ng-repeat='item in ctrl_2.myarray' style='border:1px solid #ccc; margin:20px;'>
Item = {{ item }}
<br>
<button ng-click='ctrl_2.change_item_name(ctrl_2.myarray, $index)'>change item name</button>
</div>
</div>
<!-- an extra repeat of the myarray, this time using ctrl_1 for the repeat of myarray but ctrl_3 as the controller, just to show it all ties back to the same data source -->
<hr>
<div><strong>ctrl_3</strong></div>
<div ng-controller='a_controller as ctrl_3'>
<div ng-repeat='item in ctrl_1.myarray' style='border:1px solid #ccc; margin:20px;'>
Item = {{ item }}
<br>
<button ng-click='ctrl_3.change_item_name(ctrl_3.myarray, $index)'>change item name</button>
</div>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js'></script>
<script type='text/javascript'>
angular.module('app',[])
.factory('DataService', [function() {
data = [ {'a':1}, {'b':2}, {'c':3} ];
return {
myarray : data
}
}])
.controller('a_controller', ['DataService', '$scope', function(DataService, $scope) {
var self = this;
window.s = self; // For debugging
console.log($scope);
self.myarray = DataService.myarray;
self.change_parent_name = function () {
self.parent_name = 'changed!!';
}
self.change_item_name = function(array,index){
array[index] = {'changed': 999};
}
}]);
</script>
</body>
</html>
I am new to angular js and I am struck with accessing the form element in ng-submit function.
My intention is to set the action attribute dynamically and submit the form rather using jquery selector and setting the action attribute.
<div ng-app="MyApp">
<form name="myForm" ng-controller="myController"
ng-submit="SubmitFunction(myForm)">
<input type="submit" value="Submit" />
</form>
</div>
JS:
var myApp = angular.module("MyApp",[]);
myApp.controller("myController", ["$scope", function ($scope) {
$scope.SubmitFunction = function (formElement) {
//Set action attribute ???
//Submit the form ????
};
}]);
Thanks for ur help. Finally found a solution.
<div ng-app="MyApp">
<form name="myForm" ng-controller="myController"
ng-submit="SubmitFunction($event)">
<input type="submit" value="Submit" />
</form>
</div>
JS:
var myApp = angular.module("MyApp",[]);
myApp.controller("myController", ["$scope", function ($scope) {
$scope.SubmitFunction = function (e) {
var formElement = angular.element(e.target);
formElement.attr("action", actionLink);
formElement.submit();
};
}]);