Lets say I have 2 divs side by side. (for the sake of argument using bootstrap lets say they are both 6 columns each)
If I drag an object into the column on the right, and then click a button below that column, I want the column on the left to mirror the one on the right. (so they are now identical)
I know we can do this with 2 way binding in real time, but I am wondering if it is possible to invoke 2 way binding on a click event? I also looked into angular copy, but there is very little documentation on this that i understand.
<div class="col-sm-12">
<div class="col-sm-6">
<div class="col-sm-12 left_column">
<p>{{master}}</p>
</div>
</div>
<div class="col-sm-6">
<div class="col-sm-8">
<div class="col-sm-12 right_column">{{source}}</div>
<button class="btn btn-primary" ng-click="update()">Submit Changes</button>
</div>
<div class="col-sm-4">
<div class="col-sm-4 drag_item_1"></div>
<div class="col-sm-4 drag_item_2"></div>
<div class="col-sm-4 drag_item_3"></div>
</div>
</div>
angular.module('app', ['ui.router'])
.config(['$urlRouterProvider', '$stateProvider',
function($urlRouterProvider, $stateProvider){
$urlRouterProvider.otherwise('/');
$stateProvider.state('homepage', {
url: "/",
templateUrl: "templates/homepage.html"
})
}])
.controller('swap_ctrl', function(){
$scope.source = "can it work?";
$scope.update = function() {
angular.copy($scope.source, $scope.master);
};
});
I know the code above doesnt work. It was just an attempt at trying to understand angular.copy. But it should give you an idea behind the structure. I was just going to use dragula to handle the dragging of objects to the right column.
I don't know how your actual code looks like, but let's assume you have two arrays that represent your columns:
$scope.columnsLeft = [...];
$scope.columnsRight = [...];
And view markup looks like this:
<div ng-repeat="column in columnsLeft track by $index"></div>
<div ng-repeat="column in columnsRight track by $index" ng-click="copyColumnToTheLeft(column, $index)"></div>
The ng-click could be inside the div element and it could be applied to the button. Then the method copyColumnToTheLeft which will copy our column could look like this:
$scope.copyColumnToTheLeft = function (column, index) {
$scope.columnsLeft[index] = angular.copy(column);
};
Using angular.copy will create a copy of the column passed to the method, so changing the column (in right array) in future will not immediately show the changes on the left panel, since it would be a different object.
Hope this helps.
UPDATE: In your particular case, you are going to have 2 arrays, one is master and second one is source:
$scope.master = [...];
$scope.source = [...];
If you are going to modify source array using dnd then your update method could look like:
$scope.update (){ $scope.master = angular.copy($scope.source); };
Anyway a good example of how it works is on the official docs page.
Related
I have a page consisting of two columns. One contains a vertical stepper and the other one should contain a description for each step. I want to update this description according to the current step and therefore listen to the selectionChange-Event. The problem is, that I get the previously chosen step when I look for the selectedIndex, not the one I am now on.
HTML:
<div class="row">
<div class="col-7 stepperColumn">
<mat-vertical-stepper (selectionChange)="onStepChange(eventCreationStepper)" #eventCreationStepper>
<!--some steps-->
</mat-vertical-stepper>
</div>
<div class="col-5">
<!--some descriptions-->
</div>
</div>
JS:
public onStepChange(stepper: MatStepper) {
console.log(stepper.selectedIndex);
}
At first this seems like odd behaviour, but after thinking about it I realise it's because you're passing through the template ref before you've changed the step, so the object that arrives in your method is still pointing at the previous step.
It looks like the solution is to grab the new index from the event object that is passed by the selectionChange method, like this:
HTML:
<mat-vertical-stepper (selectionChange)="onStepChange($event)">
TS:
public onStepChange(event: any): void {
console.log(event.selectedIndex);
}
This should solve your problem.
This is the code:
<div ng-repeat="data in products">
<div class=edit ng-click="dataUI.showEdit = true; content = data;">
</div>
<div ng-repeat="renew in data.renewed">
<div class=edit ng-click="dataUI.showEdit = true; content = renew;">
</div>
</div>
</div>
<div class="modal" ng-show="dataUI.showEdit">
<div class="product_price">{{content.product_price}}</div>
</div>
When I click this, the popup opens but, the content is not filled with items. In the popup, I am using content to show the data.
What am I doing wrong here?
JSFiddle: http://jsfiddle.net/HB7LU/22082/
Here's your fiddle fixed: http://jsfiddle.net/masa671/xtaa9gev/
You were using an old version of Angular, changed to version 1.4.8 (see the JavaScript Gear).
Then, a couple of missing injections:
MyCtrl.$inject = ['$scope'];
myApp.controller('MyCtrl', MyCtrl);
Finally, assignment to content in ng-click did not work, because ng-repeat creates a new scope ("Always use a dot"). I fixed this with dataUI.content. Here is one good explanation: Ng-click doesn't work inside ng-repeat.
I am building my first AngularJS app comming from backbone. I have a list where the user can select an item. The goal is show the details of the selected item in a view below the list. The list-view and detail-view are both part of the main-view.
my list view
<div id="rfc-records" class="container-fluid">
<div ng-repeat="record in records" ng-click="selectRow()" class="row select table-row">
<div class="col-lg-1 center">
{{record.id}}
</div>
<div class="col-lg-1 center">
{{record.rfcObject}}
</div>
<div class="col-lg-5">
{{record.rfcFunction}}
</div>
<div class="col-lg-2">
{{record.status}}
</div>
<div class="col-lg-3">
{{mii.utils.date.extToIntDate(record.firstProcessing)}}
</div>
</div>
</div>
As you see I already added an event to each row: ng-click="selectRow()".
It is unclear to me how to know the selected row in this function. I could do something like this :
ng-click="selectRow(record)
MainController
$scope.selectRow = function(record){
alert(record.id); // undefined
}
The result is undefined so this does not work. Plus this seems like a bad approach to pass the model back from the view to the controller. I might be able to get the application working but I have the feeling that I won't be using the paradigm as intended.
In backbone I would have a seperate view for each row where the model is bound to. But in Angular models aren't as explicit as in backbone.
In general I don't really understand how models work in Angular. R
Regarding this example I have the following questions:
How do I know what item is selected in the list
Where should I put the selectRow function? In the controller of the Mainview or in the list-view directive?
How do I pass the selected model to the details-view.
Well, passing current item into ngClick handler is pretty usual way to solve this task. I'm not sure why it's not working for you, it should. Here is the example of this typical approach.
In backbone I would have a seperate view for each row where the model is bound to. But in Angular models aren't as explicit as in backbone.
Actually Angular is even more elegant in this concern. You still have model available in every iterated row. You can refer current child scope as this in controller. So in your case if you don't want to pass record object into controller function on click, you can use this and it will point to the current scope object (remember that ngRepeat creates new child scope for every row):
$scope.selectRow = function() {
alert(this.record.id);
};
and you don't have to pass anything in HTML:
ng-click="selectRow()"
Demo: http://plnkr.co/edit/kN0vB6N6v7XnqASRSmAd?p=preview
ng-click and ng-repeat are in same div. You can add a new div in this repeated div like and this is works for me :
<div id="rfc-records" class="container-fluid">
<div ng-repeat="record in records" class="row select table-row">
<div class="col-lg-1 center">
Select This item<input type=button ng-click="selectRow(record)">
</div>
<div class="col-lg-1 center">
{{record.id}}
</div>
<div class="col-lg-1 center">
{{record.rfcObject}}
</div>
<div class="col-lg-5">
{{record.rfcFunction}}
</div>
<div class="col-lg-2">
{{record.status}}
</div>
<div class="col-lg-3">
{{mii.utils.date.extToIntDate(record.firstProcessing)}}
</div>
</div>
</div>
UPDATE: After some very insightful code from #Marc Kline, I went back and cleaned up my page. It turned out that I had my controllers listed in reversed (My angular controller was inside the Isotope controller, instead of the other way round). Once I changed it back and cleaned off some additional scripting, it started working again. I have updated the code snippet to reflect the change. Thanks to Marc and S.O!
I am having trouble figuring out how can I add new items using Angular and still let Isotope manage their UI display.
I am using Isotope and Angular to render server results in a masonry style layout. When I add new items to the layout on a button click, angular adds it just fine. However, they do not appear in the context of the isotope UI and appear separately (and cannot be sorted, laid out or filtered using Isotope).
Here is my JS Code
<!-- Define controller -->
var contrl = app.controller("MainController", function($scope){
$scope.items ={!lstXYZ}; //JSON data from server
//Function called by button click
$scope.addItem = function(item)
{
$scope.items.push(item);
$scope.item = {};
}
});
contrl.$inject = ['$scope'];
Here is the HTML to display the server results...(Updated to show working code..refer comments)
<div ng-controller="MainController">
<div class="isotope" id="isotopeContainer">
<div ng-repeat="item in items">
<div class='element-item {{item.status}}' data-category='{{item.status}}'>
<p class="number">{{item.type}}</p>
</div>
</div>
</div>
</div>
And here is my HTML button to add the new items
<table>
<tr>
<td><input type="text" ng-model="item.status" /></td>
</tr>
<tr>
<td><input type="text" ng-model="item.type" /></td>
</tr>
<tr>
<td colspan="2"><input type="Button" value="Add" ng-click="addItem(item)" /> </td>
</tr>
</table>
I am not sure how do I ensure that Isotope can recognize the newly added element and re-animate the layout.
Any help or pointers will be very appreciated. Thanks!
ng-repeat takes care of adding the new element to the DOM for you. However, Isotope isn't doing any "watching" for you - you have to manually invoke a redraw of the container.
You could just add something like $("#isotopeContainer").isotope(...) directly to your controller, but in the spirit of keeping your controllers lean and free of DOM-related code, you should instead create a service. Something like:
myApp.service('Isotope', function(){
this.init = function(container) {
$(container).isotope({itemSelector: '.element-item'});
};
this.append = function(container, elem) {
$(container).isotope('appended', elem);
}
});
... where the first method initializes a new Isotope container and the next redraws the container after an item is appended.
You could then inject this service into any controller or directive, but directives probably are best for this scenario. In this Plunker, I created two new directives: one for Isotope containers and another for Isotype elements, and used the service to do the initialization and redrawing.
In this particular case, my code was not written correctly. I have updated the question's code but wanted to mention it more clearly here...
Apparently, the beauty of Angular is that you do not need to bother with the underlying UI framework (Isotope in this case). As long as you update the Angular data array, the UI binding is updated automatically.
The only gotcha is to ensure that the UI framework div is within the context of your Angular div.
Here is the non-working code...Note that the isotope div is outside the Angular controller.
<div class="isotope" id="isotopeContainer">
<div ng-controller="MainController">
<div ng-repeat="item in items">
<div class='element-item {{item.status}}' data-category='{{item.status}}'>
<p class="number">{{item.type}}</p>
</div>
</div>
</div>
</div>
Here is the updated code with isotope running within the Angular controller context...
<div ng-controller="MainController">
<div class="isotope" id="isotopeContainer">
<div ng-repeat="item in items">
<div class='element-item {{item.status}}' data-category='{{item.status}}'>
<p class="number">{{item.type}}</p>
</div>
</div>
</div>
</div>
Hope this helps. I am thankful for all the responses and help I got from SO. Appreciate the learning opportunity.
I want to display two elements on a page controlled by different instances of the same controller, but I need to register some external information that will be unique (one "joystick" gets an identifying property set, like "player = one" while the other gets "player = two").I'm not sure of the best way of pulling this off exactly
Here's a generic example of what I'm trying to accomplish:
<!-- These need to have different configurations -->
<div ng-include src="'joystick/joy.tpl.html'"
ng-controller="JoystickCtrl">...</div>
<div ng-include src="'joystick/joy.tpl.html'"
ng-controller="JoystickCtrl">...</div>
Should I:
Use a directive?
<div ng-include src="'joystick/joy.tpl.html'"
ng-controller="JoystickCtrl" player="one">...</div>
<div ng-include src="'joystick/joy.tpl.html'"
ng-controller="JoystickCtrl" player="two">...</div>
Use $injector? (fyi - this might be an incorrect implementation)
<div ng-controller="DualJoyCtrl">
<div ng-include src="'joystick/joy.tpl.html'"
ng-controller="joyOne" player="one">...</div>
<div ng-include src="'joystick/joy.tpl.html'"
ng-controller="joyTwo" player="two">...</div>
</div>
-----
.controller('DualJoyCtrl', function ($injector, JoystickCtrl, $scope, $rootScope) {
$scope.joyOne = $injector.instantiate(JoystickCtrl, {$scope: $rootScope.$new(), player:"one"});
$scope.joyTwo = $injector.instantiate(JoystickCtrl, {$scope: $rootScope.$new(), player:"two"});
});
Or... not do this?
I realize this is similar to another, seemingly inconclusive stack post:
Edit
Since ngController is initialized before ngInit, in order to have data available in controller at once, you should wrap ngController in parent element with ngInit:
<div ng-init="player = 'one'">
<div ng-controller="JoystickCtrl">
...
</div>
</div>
Original answer
I think simple ng-init would suffice:
<div ng-controller="JoystickCtrl" ng-init="player='one'">...</div>
<div ng-controller="JoystickCtrl" ng-init="player='two'">...</div>
Store your config values in a data attribute, and retrieve it within the controller using $attrs. (The AngularJS ngInit documentation recommends to say clear of ng-init unless aliasing special properties of ngRepeat. ) A similar answer is here. This code snippet gives you the general idea:
Index.html:
<div ng-include ng-controller="JoystickCtrl" src="'same.html'" data-id="1"></div>
<div ng-include ng-controller="JoystickCtrl" src="'same.html'" data-id="2"></div>
Controller:
function joystickCtrl($scope, $attrs) {
$scope.id = $attrs.id;
};
View:
<h2>Joystick: {{id}}</h2>
Here is the full code in Plunker.