I succeeded at creating a simple "add topic" form to test laravel's pivot operations. It consists of a title, body and tag checkboxes. My models are Post, Tag and the pivot PostTag.
After reading the Laravel documentation on updating pivot tables, it seems to me that I'm making way too many queries to simply create a new topic and update the pivot's table. Also, the way I pass on the checkbox values (tags) seems kind of sloppy to me.
Here is my Angular controller:
app.controller('NewPostController', function($scope, $http) {
$scope.selection = [];
$http.get('/new_post').success(function(tags) {
$scope.tags = tags;
});
$scope.toggleSelection = function toggleSelection(tag) {
var idx = $scope.selection.indexOf(tag);
// is currently selected
if (idx > -1) {
$scope.selection.splice(idx, 1);
}
// is newly selected
else {
$scope.selection.push(tag);
}
};
$scope.addPost = function() {
$scope.post.selection = $scope.selection;
$http.post('new_post', $scope.post).success(function() {
});
}
... and my Laravel controller:
class PostController extends BaseController {
public function add() {
if($post = Post::insertGetId(array('title' => Input::json('title'),
'body' => Input::json('body')))) {
$tags = [];
foreach(Input::json('selection') as $tag) {
array_push($tags, $tag['id']);
}
$new_post = Post::find($post);
$new_post->tags()->sync($tags);
}
}
}
With this I'm actually making 5 queries to achieve the final result. However, I followed Laravel's documentation on this. Should I use a normal query instead?
Thanks!!
Related
First of all, let me mention that I am new to AngularJS, and programming aswell.
My situation is as follows:
I am dealing with over 50k entries that I pull from a SQL database.
I have to show those entries on a web platform after a search/filter is applied on those entries.
So I did some research on this and came to the conclussion that the way to go is:
SQL>PHP>JSON>ANGULARJS.
I got all this down , the thing is that ng-repeat sends everything to the browser and what I want is to filter the results and THEN print them with ng-repeat.
I have tried to implement a filter of sorts but I can't seem to solve it.
Code looks like this:
js:
var app = angular.module('myApp' ,[]);
app.controller('MainCtrl', function($scope, $http)
{
$http.get("http:source.php")
.then(function(response)
{
$scope.materiale = response.data.records;
});
});
app.filter('filtruCautare', function () {
return function (items, filtru) {
var filtered = [];
var filtruMatch = new RegExp(filtru, 'i');
for (var i = 0; i < items.length; i++) {
var item = items[i];
if (filtruMatch.test(item.MATKL) || filtruMatch.test(item.MAKTX)) {
filtered.push(item);
} else if (filtruMatch.test(item.MATNR)) {
filtered.push(item);
}
}
return filtered;
};
});
html:
<input ng-model='filtru' type="text" placeholder="...">
<tbody ng-repeat="material in materiale | filtruCautare:filtru">
I've put this together from several blogs, Stackoverflow posts/questions and other several sources...
I think that I need to somehow filter the 50k entries, store them inside a scope and use the ng-repeat to print the results from there, it's just that I'm having trouble creating a scope that pulls info from the filter.
Any help is appreciated!
Simply change your filter in order to return an empty array if the search filter is not defined (or is an empty string).
In this way you will start to see results only when you start filtering:
app.filter('filtruCautare', function () {
return function (items, filtru) {
if (!filtru) {
return [];
}
var filtered = [];
var filtruMatch = new RegExp(filtru, 'i');
for (var i = 0; i < items.length; i++) {
var item = items[i];
if (filtruMatch.test(item.MATKL) || filtruMatch.test(item.MAKTX)) {
filtered.push(item);
} else if (filtruMatch.test(item.MATNR)) {
filtered.push(item);
}
}
return filtered;
};
});
i have a partial view "_SearchPanel" that has year list dropdown, a classes multiselect control, (some other drop downs - ommitted) and a search button.
I want that when i change selection in year list drop down, only my classes list is refreshed/updated, and not the whole partial view on page.
So i use a JsonResult action in my controller (as opposed to the first time load)
public JsonResult BindClasses(int yearId)
{
ClassRepository repClass = new ClassRepository("name=ge");
YearRepository repYear = new YearRepository("name=ge");
var dataClass = repClass.GetClassesByYear(yearId);
var groupedClassOptions = dataClass.GroupBy(x => x.grade).Select(x => new OptionGroupVM()
{
GroupName = "Grade " + x.Key.ToString(),
Options = x.Select(y => new OptionVM()
{
Value = y.classID.ToString(),
Text = y.classname
})
});
return Json(groupedClassOptions);
}
My javascript
var dropDownYear = $('#ddlYear');
dropDownYear.change(function(){
$("#classList").load(url, {yearId: $(this).val()}, function(result){
setOptions($('#classList'), #Html.Raw(Json.Encode(new List<int>(){})), result);
});
});
now the problem is this result is not considered as an object as was the first time (onpageload) here:
jQuery(function ($) {
setOptions($('#classList'), #Html.Raw(Json.Encode(Model.SelectedClasses)), #Html.Raw(Json.Encode(Model.ClassOptions)));
}
How do i correct/cast it to be considered as Model.ClassOptions(type: GroupOptionsVM List) object instead of a Json
What I have tried
var url = '#Url.Action("BindClasses", "Maps")';
var dropDownYear = $('#ddlYear');
dropDownYear.change(function(){
$("#classList").load(url, {yearId: $(this).val()}, function(result){
#{var x = new List<OptionGroupVM>();}
x = result;
setOptions($('#classList'), #Html.Raw(Json.Encode(new List<int>(){})), x);
});
});
this gives me some syntax errors!!
UPDATE
[Referring to the previous question Stephen linked in comments]
Since i had to do it for two dropdown lists with slight difference i had created setOptions function in my script
function setOptions(listBox, selected, groups) {
// Generate options
createGroupedOptions(listBox, selected, groups);
// Attach plug-in
listBox.multiselect({ enableClickableOptGroups: true, onChange: function(){
var selectedClassItems = this.$select.val();
} });
}
function createGroupedOptions(element, selected, groups) {
for (var i = 0; i < groups.length; i++) {
var group = groups[i];
var groupElement = $('<optgroup></optgroup>').attr('label', group.GroupName);
for (var j = 0; j < group.Options.length; j++) {
var option = group.Options[j];
var optionElement = $('<option></option>').val(option.Value).text(option.Text);
if (selected) {
if (selected.toString().indexOf(option.Value) >= 0) {
optionElement.attr('selected', 'selected')
}
} else {
if (option.IsSelected) {
optionElement.attr('selected', 'selected')
}
}
$(groupElement).append(optionElement);
}
$(element).append(groupElement);
}
}
CALLING setOptions function
setOptions($('#classList'), #Html.Raw(Json.Encode(Model.SelectedClasses)), #Html.Raw(Json.Encode(Model.ClassOptions)));
setOptions($('#indicatorList'), #Html.Raw(Json.Encode(Model.SelectedIndicators)), #Html.Raw(Json.Encode(Model.IndicatorOptions)));
Your returning json, so using .load() makes no sense (you would typically use that when the method your calling returns a partial view).
Change your script to create the <optgroup> and <option> elements based on your data your method returns
var url = '#Url.Action("BindClasses", "Maps")';
var dropDownYear = $('#ddlYear');
dropDownYear.change(function() {
$.post(url, { yearId: $(this).val() }, function(data) {
$.each(data, function(index, item) {
var group = item.GroupName;
// use the above to build your <optgroup> element
$.each(item.Options, function(index, item) {
var value = item.Value;
var text = item.Text;
// use the above to build your <option> elements and append to the <optgroup> element
});
// append the <optgroup> to the <select id="classList"> element
});
});
});
Note the details of the code for generating the elements are in the answer to your previous question
You are trying to mix client side code (jQuery) with server side code (.NET) and it won't work. #Html.Raw and JsonEncode are server side methods. You can't use them after the page loads.
In essence, you need to either use jQuery for all of your page interaction and manage the state of the page on the client side or use full MVC (postback) and do everything on the server.
There are technically other options but I just wanted to address the fundamental issue with what you have tried so far.
I need to delete a row from my table but I don't want to reload or refresh all my table in order to see the updated rows.
var demoApp = angular.module("demoApp", ["ngResource"]);
// Controller
demoApp.controller("categoryController", function($scope, deleteCategorieService, categoriesService){
$scope.categories = categoriesService.query();
$scope.deleteCategory = function(id){
deleteCategoryService.deleteCategory({id: id});
// I want to avoid this method to refresh my table.
// $scope.categories = categoriesService.query();
};
});
// Factories
demoApp.factory("deleteCategorieService", function($resource){
return $resource("/demopro/deleteCategory/:id", {}, {
deleteCategory: {
method: "DELETE",
params: {id: "#id"}
}
});
});
demoApp.factory("categoriesService", function($resource){
return $resource("/demopro/categories", {}, {
listAllCategories : {
method: "GET",
isArray: true
}
});
});
How can I do that?
You still have to make the server call to delete the item but, to simply remove it from the view without reloading the whole list from the server, loop through your $scope.categories looking for the id of the item you are deleting, when found, remove from the array.
var i = $scope.categories.length;
while (i > 0) {
if ($scope.categories[i].id === id) {
$scope.categories.splice(i, 1);
break;
}
i--;
}
You can also do a positive loop which I normally do but I recently was told this back-to-front loop is supposed to be much faster. YMMV.
for (var i = 0; i < $scope.categories.length; i++) {
if ($scope.categories[i].id === id) {
$scope.categories.splice(i, 1);
break;
}
}
If you are using 2-way binding in your view, the HTML should update without the item you just deleted without having to requery the entire collection.
If the problem is that you want to avoid the flickering that happens when refreshing the list, just update the list in the success callback. Something like:
$scope.deleteCategory = function(id){
deleteCategoryService.deleteCategory({id: id},
function(success) {
$scope.categories = categoriesService.query();
});
};
First project working with AngularJS and I am a bit stuck using the select list to either set the default value to the first option for a new, or if its an edit select the value.
I have a form with two select lists. Note, I am thinking i'm wrong in my ng-options tag.
invite.tpl.html
<select ng-model="selectedUser" ng-options="user.id as user.user_name for user in users"></select>
<select ng-model="selectedEvent" ng-options="event.id as event.name for event in events"></select>
A controller that gets/posts JSON.
invite.js
.controller('InviteCtrl', function InviteController( $scope, InviteRes, $state, $stateParams ) {
$scope.inviteId = parseInt($stateParams.inviteId, 10);
$scope.users = InviteRes.Users.query();
$scope.events = InviteRes.Events.query();
//EDIT (HAVE ID) - SET SELECTS TO THE USER/EVENT
if ($scope.inviteId) {
$scope.invite = InviteRes.Invites.get({id: $scope.inviteId});
$scope.selectedUser = $scope.invite.user_id;
$scope.selectedEvent = $scope.invite.event_id;
}
//NEW (NO ID) - SET DEFAULT OPTIONS TO FIRST USER/EVENT
else {
$scope.selectedUser = $scope.users[0];
$scope.selectedEvent = $scope.events[0];
$scope.invite = new InviteRes.Invites();
}
Function to save.
$scope.submit = function() {
$scope.invite.user_id = $scope.selectedUser;
$scope.invite.event_id = $scope.selectedEvent;
//IF ID - UPDATE ELSE NEW
if ($scope.inviteId) {
$scope.invite.$update(function(response) {
$state.transitionTo('invites');
}, function(error) {
$scope.error = error.data;
});
}
else {
$scope.invite.$save(function(response) {
$state.transitionTo('invites');
}, function(error) {
$scope.error = error.data;
});
}
};
And a getting those resources
.factory( 'InviteRes', function ( $resource ) {
return {
Invites: $resource("../invites/:id.json", {id:'#id'}, {'update': {method:'PUT'}, 'remove': {method: 'DELETE', headers: {'Content-Type': 'application/json'}}}),
Users: $resource('../users.json'),
Events: $resource('../events.json'),
};
})
I looked around and found some articles explaining how to do this, but everything I've tried has either given me issues with either setting the values, or saving the form.
The resource API doesn't return immediately - see the docs for the following statement:
It is important to realize that invoking a $resource object method
immediately returns an empty reference
Could it simply be that you're trying to assign the value before it's available?
Could you change your code to read something like:
if ($scope.inviteId) {
$scope.invite = InviteRes.Invites.get({id: $scope.inviteId}, function() {
$scope.selectedUser = $scope.invite.user_id;
$scope.selectedEvent = $scope.invite.event_id;
});
}
In terms of the select directive, I tend to use objects rather than values, e.g.
<select ng-model="selectedUser" ng-options="user.user_name for user in users"></select>
// in controller:
$scope.selectedUser = $scope.users[1];
What I have is simple CRUD operation. Items are listed on page, when user clicks button add, modal pops up, user enters data, and data is saved and should automatically (without refresh)be added to the list on page.
Service:
getAllIncluding: function(controllerAction, including) {
var query = breeze.EntityQuery.from(controllerAction).expand(including);
return manager.executeQuery(query).fail(getFailed);
},
addExerciseAndCategories: function(data, initialValues) {
var addedExercise = manager.createEntity("Exercise", initialValues);
_.forEach(data, function(item) {
manager.createEntity("ExerciseAndCategory", { ExerciseId: addedExercise._backingStore.ExerciseId, CategoryId: item.CategoryId });
});
saveChanges().fail(addFailed);
function addFailed() {
removeItem(items, item);
}
},
Controller:
$scope.getAllExercisesAndCategories = function() {
adminCrudService.getAllIncluding("ExercisesAndCategories", "Exercise,ExerciseCategory")
.then(querySucceeded)
.fail(queryFailed);
};
function querySucceeded(data) {
$scope.queryItems = adminCrudService.querySucceeded(data);
var exerciseIds = _($scope.queryItems).pluck('ExerciseId').uniq().valueOf();
$scope.exerciseAndCategories = [];
var createItem = function (id, exercise) {
return {
ExerciseId: id,
Exercise : exercise,
ExerciseCategories: []
};
};
// cycle through ids
_.forEach(exerciseIds, function (id) {
// get all the queryItems that match
var temp = _.where($scope.queryItems, {
'ExerciseId': id
});
// go to the next if nothing was found.
if (!temp.length) return;
// create a new (clean) item
var newItem = createItem(temp[0].ExerciseId, temp[0].Exercise);
// loop through the queryItems that matched
_.forEach(temp, function (i) {
// if the category has not been added , add it.
if (_.indexOf(newItem.ExerciseCategories, i.ExerciseCategory) < 0) {
newItem.ExerciseCategories.push(i.ExerciseCategory);
}
});
// Add the item to the collection
$scope.items.push(newItem);
});
$scope.$apply();
}
Here is how I add new data from controller:
adminCrudService.addExerciseAndCategories($scope.selectedCategories, { Name: $scope.NewName, Description: $scope.NewDesc });
So my question is, why list isn't updated in real time (when I hit save I must refresh page).
EDIT
Here is my querySuceeded
querySucceeded: function (data) {
items = [];
data.results.forEach(function(item) {
items.push(item);
});
return items;
}
EDIT 2
I believe I've narrowed my problem !
So PW Kad lost two hours with me trying to help me to fix this thing (ad I thank him very very very much for that), but unfortunately with no success. We mostly tried to fix my service, so when I returned to my PC, I've again tried to fix it. I believe my service is fine. (I've made some changes as Kad suggested in his answer).
I believe problem is in controller, I've logged $scope.items, and when I add new item they don't change, after that I've logged $scope.queryItems, and I've noticed that they change after adding new item (without refresh ofc.). So probably problem will be solved by somehow $watching $scope.queryItems after loading initial data, but at the moment I'm not quite sure how to do this.
Alright, I am going to post an answer that should guide you on how to tackle your issue. The issue does not appear to be with Breeze, nor with Angular, but the manner in which you have married the two up. I say this because it is important to understand what you are doing in order to understand the debug process.
Creating an entity adds it to the cache with an entityState of isAdded - that is a true statement, don't think otherwise.
Now for your code...
You don't have to chain your query execution with a promise, but in your case you are returning the data to your controller, and then passing it right back into some function in your service, which wasn't listed in your question. I added a function to replicate what yours probably looks like.
getAllIncluding: function(controllerAction, including) {
var query = breeze.EntityQuery.from(controllerAction).expand(including);
return manager.executeQuery(query).then(querySucceeded).fail(getFailed);
function querySucceeded(data) {
return data.results;
}
},
Now in your controller simply handle the results -
$scope.getAllExercisesAndCategories = function() {
adminCrudService.getAllIncluding("ExercisesAndCategories", "Exercise,ExerciseCategory")
.then(querySucceeded)
.fail(queryFailed);
};
function querySucceeded(data) {
// Set your object directly to the data.results, because that is what we are returning from the service
$scope.queryItems = data;
$scope.exerciseAndCategories = [];
Last, let's add the properties we create the entity and see if that gives Angular a chance to bind up properly -
_.forEach(data, function(item) {
var e = manager.createEntity("ExerciseAndCategory");
e.Exercise = addedExercise; e.Category: item.Category;
});
So I've managed to solve my problem ! Not sure if this is right solution but it works now.
I've moved everything to my service, which now looks like this:
function addCategoriesToExercise(tempdata) {
var dataToReturn = [];
var exerciseIds = _(tempdata).pluck('ExerciseId').uniq().valueOf();
var createItem = function (id, exercise) {
return {
ExerciseId: id,
Exercise: exercise,
ExerciseCategories: []
};
};
// cycle through ids
_.forEach(exerciseIds, function (id) {
// get all the queryItems that match
var temp = _.where(tempdata, {
'ExerciseId': id
});
// go to the next if nothing was found.
if (!temp.length) return;
// create a new (clean) item
var newItem = createItem(temp[0].ExerciseId, temp[0].Exercise);
// loop through the queryItems that matched
_.forEach(temp, function (i) {
// if the category has not been added , add it.
if (_.indexOf(newItem.ExerciseCategories, i.ExerciseCategory) < 0) {
newItem.ExerciseCategories.push(i.ExerciseCategory);
}
});
// Add the item to the collection
dataToReturn.push(newItem);
});
return dataToReturn;
}
addExerciseAndCategories: function (data, initialValues) {
newItems = [];
var addedExercise = manager.createEntity("Exercise", initialValues);
_.forEach(data, function (item) {
var entity = manager.createEntity("ExerciseAndCategory", { ExerciseId: addedExercise._backingStore.ExerciseId, CategoryId: item.CategoryId });
items.push(entity);
newItems.push(entity);
});
saveChanges().fail(addFailed);
var itemsToAdd = addCategoriesToExercise(newItems);
_.forEach(itemsToAdd, function (item) {
exerciseAndCategories.push(item);
});
function addFailed() {
removeItem(items, item);
}
}
getAllExercisesAndCategories: function () {
var query = breeze.EntityQuery.from("ExercisesAndCategories").expand("Exercise,ExerciseCategory");
return manager.executeQuery(query).then(getSuceeded).fail(getFailed);
},
function getSuceeded(data) {
items = [];
data.results.forEach(function (item) {
items.push(item);
});
exerciseAndCategories = addCategoriesToExercise(items);
return exerciseAndCategories;
}
And in controller I have only this:
$scope.getAllExercisesAndCategories = function () {
adminExerciseService.getAllExercisesAndCategories()
.then(querySucceeded)
.fail(queryFailed);
};
function querySucceeded(data) {
$scope.items = data;
$scope.$apply();
}