I'm trying to push data from a link within my grid data UI, when you click the link, open a popup (which I do with a modal fine) however when the modal opens, I can't access any of the data that was defined in the other controller.
This snippet:
<a href ng-click="grid.appScope[col.field](row.entity)">Popup</a>
Works fine, where it shows the col.field value, however I'd like to show data within the popup from grid.appScopecol.field in the popup - however that is another controller, how would I handle passing data from one controller to another within this format?
My suggestion is just pass those data into angular service define a service like
angular.service('MyService', function() {
//if you want Object format or
this.controller1Data = {};
//if you want array format
this.controller1Data = {};
});
in your controller just pass the data into that service like
//In controller
MyService.controller1Data = //Pass the data to that service;
then in HTMl
<a href ng-click="//call that method()">Popup</a>
Related
So I have a primary pqgrid object on the main page and on editing one of the rows, a jquery popup appears with the data corresponding to that row which includes few text fields and another pqgrid.
The first time I click edit, the inner grid is loaded correctly with the correct data. But upon closing the dialog and editing a different row, the grid loads up empty without any data.
In order to debug, this is how my getData of dataModel looks like:
getData: function (response) {
console.log(customerId);
console.log(response);
return { data: response };
}
It prints the correct customerId and also the correct response from the server but still the rows aren't populated.
Here is a link to replicate the issue.
Select a random row and click edit. The new grid populates just fine. Close the dialog and edit a different row. The new grid shows no records. Open your browser console to confirm that the new data is coming from the webservice.
Thanks.
append an array name to your json string like this:
var feedbackChkList = await _clientFeedBackBL.FeedbckChkList(id);
StringBuilder sb = new StringBuilder(#"{""data"":");
string json = JsonConvert.SerializeObject(feedbackChkList);
sb.Append(json);
sb.Append("}");
return this.Content(sb.ToString());
it worked for me.
I have the following issue with angular and the html select-input:
When the user loads the page my select is empty until the data is loaded and returned from the corresponding service.
In this case the select is populated correctly.
However, the user should be able to filter the model with a click on a button.
When I press the button a new request is send to the REST-API and the response contains the new model for the select.
Unfortunately, the select won't update correctly even when I change it's model
Here is some code to illustrate my problem:
// This happens in my controller
EventService.getAvailableRooms(requestObject).then(function successCallback(response){
// sanatizeRoomTypes is used to generate user-friendly names instead of [1, 2,..]
vm.rooms = DataSanatizer.sanatizeRoomTypes(response.data);
}, function errorCallback(response){
console.log(response)
});
vm.rooms is the model of my select:
<select id="roomSelect" ng-model="eventCtrl.selectedRooms"
ng-options="room.name group by room.type for room in eventCtrl.rooms track by room.id" multiple required>
</select>
In some cases the select duplicates it's model or looses entries. It seems like there is some sort of data binding problem.
Thanks,
Try wrapping your model changes in $scope.apply :
$scope.$apply(function() {
$scope.data.myVar = "Another value";
});
Read here for more info:
http://tutorials.jenkov.com/angularjs/watch-digest-apply.html
You can also use $scope.$watch on the changing $scope variables to update them in your view.
I'm a newbie to Knockout.js. I implemented the Knockout.js by loading data from ajax source and use foreach loop to create a table of the data. The tutorial i followed is here
http://www.dotnetcurry.com/ShowArticle.aspx?ID=933
My issue here is, due to the nature of my application, I find that the first load is better served from the server side using a grid component and I only want Knockout.js to take care of "Add" row, "Update" a row and "delete" a row.
My question is,
1) how do I replace the "first" load and populate the lookupCollection :ko.observableArray() in the article with the default data in the html table?
2) Related to #1. If the first load, the table layout with data is constructed from the server side, then how do I bind "foreach" to the grid so "add" can be performed on lookupCollection?
Thanks and again, I'm a newbie, I must be missing some key concepts here.
One way would be to pass your initial data into your view model. Since you are using asp.net it would look something like this:
//Dump raw data into javascript variable
var data = #Html.Raw(ViewBag.Data);
function ViewModel(data) {
var self = this;
//Unpack raw data
self.lookupCollection = ko.observableArray(data.lookupCollection);
}
//initialize view model
var viewModel = new ViewModel(data);
ko.applyBindings(viewModel);
I have some json attached to a data attribute on a page. The json data is used to build a table in angularjs.
I'm using coffeescript and haml.
app = angular.module("myApp", [])
app.controller "TableCtrl", ($scope) ->
$scope.table = $("#mydata").data("myjson")
#table{"ng-app"=>"myApp","ng-controller" =>"TableCtrl"}
%table
%tbody
%tr{"ng-repeat"=>"(i,item) in table" }}"}
%td {{item.name}}
The page loads the data into a table. Elsewhere on the page the json on the data attribute can be changed by a user with jquery. How can I have 2-way binding between the json data and the table? i.e I want the table to change as the json on the data attribute is changed locally.
What you need is to tell AngularJS to observe $("#mydata").data("myjson") for any changes and then update $scope.table when a change occurs. Try adding the following code to your controller (sorry I don't know coffeescript).
$scope.$watch(
function () { return $("#mydata").data("myjson");},
function(newJson) {
$scope.table = newJson;
},
true
);
I'm using AngularJS to build an application that allows users to build reports and then submit them. The title and the time of creation are automatically generated (based on user input), and the report summary is added into a list of all of the reports the user has made.
The table will be eventually populated from a server-side JSON string (and new entries will be added to the server from the local session), but for my local testing, I need a way to add to the table during a local client-side session.
A user will go to a separate page where they can create a report: once they click "Run Report," the report summary should be added to the table, where the name of the report and the date it was created are automatically populated from the user's input. The report-creating interface is on a different page and consequentially a different controller scope from the "main" page where the list of report summaries resides.
Now, here's my question: what is the best, most Angular-tastic way to submit a report summary to the table (a.k.a. a local model) from a different controller $scope?
My code looks like this (keep in mind it is probably dreadful, and I'm planning to refactor it!):
controllers.js:
var MainCtrl = function($scope) {
$scope.reports = [
{name:'Trx Summary', date:'Mar 20, 2013 # 12:30PM'},
{name:'Trx Summary', date:'Mar 20, 2013 # 12:30PM'}
];
};
_dat_partial_view.html:
<div ng-controller="MainCtrl" class="row-fluid">
<table class="table table-striped">
...
<tr ng-repeat="report in reports">
<td>
<p>{{report.name}} <span class="label label">Generating</span></p>
</td>
<td>
<dl class="no-margin">
<dt>Date Range</dt>
<dd>Mar 3, 2013 - Mar 13, 2013</dd>
<dt>Generated</dt>
<dd>{{report.date}}</dd>
</dl>
</td>
...
</tr>
This successfully creates some dummy content that populates the table with two entries.
What do I need to do to create such a dynamic list-adder? I'm pretty sure I need to push elements into the array, but I have no idea how to do so outside of the current controller $scope. I tried placing the array's code outside of the controller $scope:
controllers.js:
reports = [
{name:'Trx Summary', date:'Mar 20, 2013 # 12:30PM'},
{name:'Trx Summary', date:'Mar 20, 2013 # 12:30PM'}
];
var MainCtrl = function($scope) {};
This simply removed the two dummy entries from the table, so that didn't work.
Any ideas?
Question 2
Another question: What is the best way to create the dynamic list of content that populates the table? The app will create the report, and store it locally. It will then try to push the new report to the server, which will generate the report and theoretically send back a result that concatenates to the JSON string. In other words, the report stays local until it is successfully sent to and generated by the server. The user cannot read the report until it is generated, but the report will also remain saved locally if the server cannot, for some reason, accept the request to generate the new report.
This said, I've seen examples that suggest using a service or factory. Is this the wisest thing to do? Is this better than a simple array like what I've got set up now?
You should be using a service here, I think the example you referenced is the correct approach
You can pass objects into a different scope by using broadcast.
controllerOne
$rootScope.$broadcast('ReportSubmit', $scope.reportObject);
data can be your object from your controller.
Then it listens for the broadcast in the other controller where you can define your data and manipulate it and have access to it..
controllerTwo
$scope.$on('ReportSubmit', function(event, data) {
$scope.reportObject = data;
};
For the second question, when you create new report, if you have the model bindings on the front-end you can do it like this.
This function you'd bind to ng-click on the create action passing in your object from the form fields.
$scope.createNewReport = function(object) {
// Assign object to var
var newReport = object;
//Add new object to data from in memory object.
$scope.reportList.push(newReport);
};
You can pass it back to the controller or server by using ajax to pass the reportList object
Found a fiddle that may potentially help you out. http://jsfiddle.net/yh3Ds/24/