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>
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 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>
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 have a list of items and I've rendered them in a template via ng-repeat. Each of them is controlled by an itemController which exposes some behavior for item (e.g. grabing focus). Here is the HTML:
<body ng-controller="mainController">
<button ng-click="addItem()">add</button>
<ul>
<li ng-repeat="item in items" ng-controller="itemController">
<div ng-if="item.isEditing">
<input ng-model="item.name"/>
<button ng-click="item.isEditing=false">done</button>
</div>
<span ng-if="!item.isEditing">{{item.name}}</span>
</li>
</ul>
</body>
In the mainController, I have a function for adding a new item to items. Here is the code for mainController:
app.controller('mainController', function($scope){
$scope.items = [
{
name: "alireza"
},
{
name: "ali"
}
];
$scope.addItem = function(){
$scope.items.push({isEditing: true});
}
});
Whenever I add an item to items array, a corresponding li element is added into the view which is controlled by an instance of itemController, and the corresponding model is the new item I've just added (or maybe the scope of the itemController, which contains item).
Problem:
When I add some item to items, I only have access to item and not the scope of the recently created item. So I can't run some function (like grabFocus) on the scope of new item.
Is it something semantically wrong in my design? What is the canonical approach for this problem?
Plunker link
Here is the plunker link with related comments
You can use $broadcast from the parent scope, along with $on from the child scope, to notify the child scopes of the newly added item. And by passing (as an argument) the $id of the child scope that corresponds to the newly added item, each child catching the event can know whether or not it's the one that needs to have grabFocus() called.
Here's a fork of your Plunker that uses that approach. I wasn't sure what you were trying to accomplish with $element.find(":text").focus(); in your original Plunker, so I tweaked it to toggle a $scope property that in turn controlled a style in the view. The newly added item will be red (by calling its own grabFocus function to toggle the flag to true), and the others will be black (by calling their own loseFocus function to toggle the flag to false).
Modified HTML (just the repeated li):
<li ng-repeat="item in items" ng-controller="itemController">
<div ng-if="item.isEditing">
<input ng-model="item.name"/>
<button ng-click="item.isEditing=false;handleItemAdded($index);">done</button>
</div>
<span ng-if="!item.isEditing" ng-style="{ color: isFocused ? 'red' : 'black' }">{{item.name}}</span>
</li>
Full JavaScript:
var app = angular.module("app",[]);
app.controller('mainController', function($rootScope, $scope){
$scope.items = [ { name: "alireza" }, { name: "ali" } ];
$scope.addItem = function(){
$scope.items.push({isEditing: true});
};
$scope.handleItemAdded = function (index) {
// $rootScope.$broadcast('item-added', { index: index });
for(var cs = $scope.$$childHead; cs; cs = cs.$$nextSibling) {
if (cs.$index === index) {
$rootScope.$broadcast('item-added', { id: cs.$id });
break;
}
}
};
});
app.controller('itemController', function($scope, $element){
$scope.$on('item-added', function (event, args) {
if ($scope.$id === args.id + 1) {
$scope.grabFocus();
} else {
$scope.loseFocus();
}
});
$scope.grabFocus = function() {
$scope.isFocused = true;
};
$scope.loseFocus = function() {
$scope.isFocused = false;
};
});
I changed your approach a little bit by creating an unique id for every input, based on its index number. See code below, hope it helps.
// Code goes here
var app = angular.module("app",[]);
app.controller('mainController', function($scope,$timeout){
$scope.items = [
{
name: "alireza"
},
{
name: "ali"
}
];
$scope.addItem = function(){
$scope.items.push({isEditing: true});
$timeout(function(){
document.getElementById("newItem"+($scope.items.length-1)).focus();
},0)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#1.3.0" data-semver="1.3.0" src="//code.angularjs.org/1.3.0/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-controller="mainController">
<button ng-click="addItem()">add</button>
<ul>
<li ng-repeat="item in items">
<div ng-if="item.isEditing">
<input ng-model="item.name" id="newItem{{$index}}"/>
<button ng-click="item.isEditing=false">done</button>
</div>
<span ng-if="!item.isEditing">{{item.name}}</span>
</li>
</ul>
</body>
</html>