angularjs,laravel,angularjs-scope , angularJS update table model on form submit


angularJS update table model on form submit

Question:

Tag: angularjs,laravel,angularjs-scope

I'm new to angular, currently having a problem with updating a table data on form submit. This is my view:

<div class="container-fluid">

    <div class="row">
        <div class="col-md-12" ng-controller="feeStatement">

        <panel panel-class="panel-sky" heading="Add Fee Details">
                <panel-controls>
                    <panel-control-collapse></panel-control-collapse> 
                </panel-controls>

                <div id="alert" class="alert alert-danger hide">
                  <strong>Error</strong> Unable to save the course data.<br><br>
                  <ul>
                      <li id="error"></li>
                  </ul>
                </div>

                <form ng-submit="submit(credentials)" ng-controller="feeStatement" class="form-horizontal row-border">

                    <div class="form-group">
                        <label for="fieldname" class="col-md-3 control-label">Item Description</label>
                        <div class="col-md-6">
                            <textarea name="description" id="fieldabout" class="form-control autosize" rows="2" ng-model="credentials.description"></textarea>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="fieldname" class="col-md-3 control-label">Due Date</label>
                        <div class="col-md-6">
                            <datepicker ng-model="dt" min-date="minDate" show-weeks="true" class="datepicker"></datepicker>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="fieldname" class="col-md-3 control-label">Amount Payable</label>
                        <div class="col-md-6">
                            <input name="amount_payable"
                            type="number"
                            placeholder="Numbers only"
                            required
                            ng-model="credentials.amount_payable"
                            class="form-control">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="fieldname" class="col-md-3 control-label">Total Collected</label>
                        <div class="col-md-6">
                            <input name="total_collected"
                            type="number"
                            placeholder="Numbers only"
                            required
                            ng-model="credentials.total_collected"
                            class="form-control">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="fieldname" class="col-md-3 control-label"></label>
                        <div class="col-md-6">
                           <input type="submit" class="finish btn-success btn" value="Submit" />
                        </div>
                    </div>

                </form>

            </panel>

            <panel panel-class="panel-sky" heading="Fee Details">
                <panel-controls>
                    <panel-control-collapse></panel-control-collapse> 
                </panel-controls>

                <p ng-hide="isValid(feedetails)" class="ng-hide">No fee statements for the student.</p>
                <div ng-show="isValid(feedetails)" class="table-responsive">

                    <table class="table">
                        <thead>
                            <tr>
                                <th style="padding-right:100px">Item Description</th>
                                <th>Due Date</th>
                                <th>Amount Payable</th>
                                <th>Total Collected</th>
                                <th>Outstanding</th>
                                <th>Fine</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="item in feedetails">

                                <td align="left"><i>{{item.description}}</i></td>
                                <td align="left"><i>{{item.duedate}}</i></td>
                                <td align="left"><i>{{item.amount_payable}}</i></td>
                                <td align="left"><i>{{item.total_collected}}</i></td>
                                <td align="left"><i>{{item.outstanding}}</i></td>
                                <td align="left"><i>{{item.fine}}</i></td>

                            </tr>
                        </tbody>
                        <form ng-controller="feeStatement"><input type="submit" class="finish btn-success btn" ng-click="test()" value="Submit" /></form>
                    </table>
                </div>
            </panel>



        </div>
    </div>

</div> <!-- container-fluid -->

This is my controller function:

 $scope.submit = function(credentials) {

        var outstanding = ($scope.credentials.amount_payable - $scope.credentials.total_collected);
        var base_url = $("meta[name='base_url']").attr('content');
        $scope.student_id = ($routeParams.student_id || "");

        var data = {
          'user_id': $scope.student_id,
          'description': $scope.credentials.description,
          'duedate': $scope.dt,
          'amount_payable': $scope.credentials.amount_payable,
          'total_collected': $scope.credentials.total_collected,
          'outstanding': outstanding
        };

        $http({
        method: 'post',
        url: base_url + '/student/postfees',
        data: data
        }).
        success(function(data, status, headers, config) {

          if(data['success']) {

            $scope.feedetails.push(data);

          } else {


          } 
        }).
        error(function(data, status, headers, config) {

            $('#error').html('code: ' + status);
            $('#alert').fadeIn(1000).removeClass('hide');
        });

    };

When I submit a form $scope.feedetails updates, but the table data in rows still the same. But if i click on button with test() function which is within a table tag, the data updates dynamically.I've went through simillar topics, but that didn't helped. I assume that the problem with a $scope, can somebody give me a direction please.

PS. I've tried to put data in a rootScope, but still the same result.


Answer:

The reason why:

Actually the issue is that $scope doesn't exist in success and you can neither try to inject from the function because in the code is happening this:

 promise.success = function(fn) {
    assertArgFn(fn, 'fn');

    promise.then(function(response) {
      fn(response.data, response.status, response.headers, config);
    });
    return promise;
  };

in particular note fn(response.data, response.status, response.headers, config); it means that is going to pass to your function only those arguments and there is not $scope or $rootScope at all in there.

How to fix the problem:

One thing you can do is generate a function that has access to $scope and inject it in .success.
One possible implementation is :

$scope.submit = function(credentials) {

    var outstanding = ($scope.credentials.amount_payable - $scope.credentials.total_collected);
    var base_url = $("meta[name='base_url']").attr('content');
    $scope.student_id = ($routeParams.student_id || "");

    var data = {
        'user_id': $scope.student_id,
        'description': $scope.credentials.description,
        'duedate': $scope.dt,
        'amount_payable': $scope.credentials.amount_payable,
        'total_collected': $scope.credentials.total_collected,
        'outstanding': outstanding
    };

    var callback = function(data) {
        $scope.feedetails.push(data);
    };

    $http({
        method: 'post',
        url: base_url + '/student/postfees',
        data: data
    })
    .success(function(data, status, headers, config) {
        if(data['success']) {
            callback(data);
        } else {

        } 
    })
    .error(function(data, status, headers, config) {
        $('#error').html('code: ' + status);
        $('#alert').fadeIn(1000).removeClass('hide');
    });
};

Related:


Laravel validator vs requests


laravel,laravel-5,laravel-validation
Hello, I want to understand how to handle data validation with Laravel 5. I see that this can be done using or the validator, or the request files. The thing is that there are many points I didn't get. What is the difference between using a request file for validation...

navbar disappears but no dropdown


angularjs,bootstrap
So been trying to set up a navbar that collapses to a drop down when the size is under a certain number of pixels. So far I have managed to make the normal menu disappear when it goes under a certain size, but once I make the window smaller and...

Error: [$injector:unpr] Unknown provider: RestangularProvider <- Restangular <- ctrlAG


javascript,angularjs,restangular
I have one app: app.js: angular.module('AngApp', [ 'angularGrid' ]); My own restangular service.js: var app = angular.module('AngApp'); app.factory('restService', ['Restangular', function (Restangular) { // make use of Restangular } ]); and controller.js: var app = angular.module('AngApp'); app.controller('ctrlAG', ['$scope', '$http', '$log', '$mdDialog', 'Restangular',function ($scope,$http, $log, $mdDialog, Restangular) { // make use of...

AngularJS: Adding ng-click within element.append


angularjs,directive
Within my directive I have the following code, which will be used to continually append to an html element. //Establishes the type of question and therefore what should be displayed app.directive('questionType', function ($http, $compile) { return { restrict: 'A', link: function (scope, element, attr, model) { switch (scope.Question.inputType) { case...

calling one controller from another controller


angularjs
I have 2 controllers and I am calling the second controller from the function of first controller $scope.open = function () { var modal = $modal.open({ templateUrl: 'views/view1.html', controller: 'controller2', // other parameters }); /* some code */ } Both the controllers are in the same folder. There are similar...

success and error function in the controller for a service


javascript,angularjs,angularjs-service,angularjs-http,angularjs-promise
I have the following code in a service and I am calling fetchData function from the controller. Service app.service("geturl", function($http) { urllist = []; geturl.fetchData = function() { var data = []; for (i = 0; i < urllist.length; i++) { (function(index) { return $http.get(geturl.urllist[index], { timeout: 8000 }) .then(function(response)...

Using ng-click to toggle between two functions


javascript,angularjs,angular-ui,angular-ui-bootstrap
I am using the datepicker from bootstrap-UI for angular. I would like to toggle between two functions. now() and clear(). Is this possible inside Angular's ng-click? http://plnkr.co/edit/aMcKwXOSQwgnGwfNN9yI?p=preview The toggle has the ng-click="today()" I would like to add clear() to it, thanks. Controller Code: $scope.today = function() { $scope.dt = new...

Socket.IO message doesn't update Angular variable


javascript,angularjs,node.js,sockets
I have a socket.io client-server setup with AngularJS running on the client. // Server.js var io = require('socket.io')(server); io.on('connection', function (socket) { socket.on('message', function (msg) { //console.log(msg); console.log(msg); io.emit('message', msg); }); }); As observed, it essentially emits a message events with the data stored in the variable msg. And then...

Getting CROS Error even after adding header in node.js for Angular js


javascript,angularjs,node.js
I am trying to consume REST API from NODE JS for Angular js,even after adding cors header in my server code I am getting error XMLHttpRequest cannot load http://127.0.0.1:8085/issues. Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers. I am new to both Angular JS and Node JS. Node JS...

AngularJS dynamically call function


javascript,angularjs
at this point, I'm new to AngularJS. This works: scope.$apply(scope.hideTooltip()); But calling the function dynamically does not work: scope.$apply( scope.$eval(attrs.ngEnter, {'event': event}) ); HTML: <input type="text" ng-model="value" ng-enter="hideToolTip()" /> The enitre directive: app.directive('ngEnter', function() { return function(scope, element, attrs) { console.log(scope.hideTooltip()); element.bind("keydown keypress", function(event) { if(event.which === 13) { console.log(attrs.ngEnter);...

function is undefined if no module is declared in Angular


angularjs
I am new in Angular and I am studying controllers. In my code I setup a simple controller access but when I tried to run in my browser I encountered a series of error messages that looks like this: "Error: [ng:areq] Argument 'personController' is not a function, got undefined In...

How to select multiple selected value from select option


angularjs,model-view-controller,ionic-framework,ionic
My controller code looks like $scope.items = [{ heading: 'Sports', types: [{ name: 'Football', }, { name: 'Persie', }, { name: 'Ronaldo', }, { name: 'Messy', }], id: '1' }, { heading: 'Cricket', types: [{ name: 'Tendulkar', }, { name: 'Lara', }, { name: 'Ponting', }], id: '2' }]; My...

Laravel Interfaces


php,laravel,interface,namespaces
I used the following tutorial to get an idea about interfaces: http://vegibit.com/what-is-a-laravel-interface/ But I wanted to change the directory of where I am putting my interfaces to "App/Models/Interfaces". And so I did. But now I cannot get it to work anymore. Here is my code: Routes.php App::bind('CarInterface', 'Subaru'); Route::get('subaru', function()...

REST API with token based authentication


angularjs,codeigniter,api,rest,token
I want to develop a web site with AngularJS. On the backend side I will use Codeigniter REST framework. I have some security issues and I don't want to start developing without fixing them on my mind. I don't want to use something like api key because it will be...

Iframe does not show scrollbar


html,css,angularjs,iframe,ionic
Can't seem to make the iframe appear with a scroll-bar. Go to https://billiving-qa.azurewebsites.net/accountant email: [email protected] pass: 111111 Reload the list with F5, then click new invoice on the right side. The content is lengthy but doesn't show the scroll-bar. My css uses the following: .frm { position: fixed; width: 100%;...

Can't get angular.js to loop through array and post to html


angularjs,ng-repeat
Edit: changed ng-controller to ng-app in body tag, was typo I'm new to angular and im trying to use ng-repeat to post all items in the products[] to html but the {{expressions}} come out as text rather than computing. I don't have my laptop so I'm testing all this on...

How to add class on ng-click?


angularjs
I have this: http://plnkr.co/edit/gJko3umteXXEye7o9StR?p=preview How can i add class "active-link" on: @Translate("PERSONAL_INFORMATION") @Translate("NOTIFICATIONS") @Translate("CHANGE_PASSWORD") @Translate("GAME_SETTINGS") ...

Improve slow angular directive


javascript,angularjs,angularjs-directive
I have a page that renders table view or div/blocks view depending on window width. But the swop between views happens very slow. Maybe I am not doing things in the best way? I basically have 2 scope variables(block and table, set to true or false) defined in the controller....

Angular-strap data-trigger='focus' not working


javascript,html,angularjs,angular-strap
the data-trigger focus is not working for me ... <span data-content='foo' data-html='true' data-placement='top' data-container='body' data-trigger='focus' bs-popover> Nothing is actually happening when I am clicking on this element. If I remove data-trigger='focus' and set it to hover or click, it does work. I am using angularjs. 1.2.18 and angular-strap : 2.2.4...

validation of AngularJS direcrives


angularjs,html5,html-validation
I read on W3C School that to make a valid HTML page I have to add data before each angular directive in HTML file (e.g.: <p>The name is <span data-ng-bind="firstName"></span></p> or <div data-ng-app="" data-ng-init="firstName='John'"> Ok that's fine. I have two questions: Should this prefix be used only for ng- directives?...

AngularJS factory dependencies


javascript,html,angularjs,mongodb
I'm using AngularJS to extract information stored in mongodb. I'm trying to use a factory to retrieve that information using $http . I read so much information about how to do it, and no one works for me. Also I'm using node + express, the routes works fine. The problem...

Setting up a second Homestead Laravel app


laravel,laravel-5,homestead
I've been trying to set up a second Laravel 5 app on my local Homestead space. I have been following the instructions from the official documentation and from this blog. (Although I have had to use the specific ID of the provision in order to get the vagrant provision command...

Save to 3 firebase locations with a slow internet connection


javascript,angularjs,firebase,latency
Sometimes I'm having issues with firebase when the user is on a slow mobile connection. When the user saves an entry to firebase I actually have to write to 3 different locations. Sometimes, the first one works, but if the connection is slow the 2nd and 3rd may fail. This...

How do I add a class on ng-click from layout?


angularjs
Here is the page layout: <li class="dropdown"> <ul class="submenu"> <li ng-click="SetActiveMenuForPersonalInfo();"> <a href="../Account/#/PersonalInfo">@Translate("MY_ACCOUNT")<a> </li> </ul> </li> When a user clicks on my account, they get this: http://plnkr.co/edit/gJko3umteXXEye7o9StR?p=preview This is the function in the controller: $scope.SetActiveMenuForPersonalInfo = function () { $scope.activeMenu = 'Settings'; $scope.activeLink = "PersonalInfo"; console.log("Active menu:...

Getting code from my forked repository


git,laravel,repository,laravel-5,composer-php
I made a fork from a repository called "chrisbjr/api-guard". the repository latest version is v2.2.2, and I made a release v2.2.3 from my fork. I have my own branch which is dev-fulluth, to get the code from my fork not from the main repo, composer has to contain the below...

How to use a service with Http request in Angular JS


javascript,angularjs
I'm using AngularJS to build my web application, I've been always using controllers to make HTTP request, which makes things easier and clear for me. But for a better code structure, and better execution for my application, I wanted to use services instead of controllers to use the web service....

UI-Router : Prevent access to parent state


angularjs,angular-ui-router,state
I am moving to UI-Router as my App router. I want to have nested state as below: $stateProvider .state('app', { url: '/app', template: ' <div ui-view></div>', authenticate: true }) .state('app.state1', { url: '/state1', templateUrl: 'app/state1.html', controller: 'State1Ctrl', controllerAs: 'state1', authenticate: true }) .state('app.state2', { url: '/state2', templateUrl: 'app/state2.html', controller: 'State2Ctrl',...

AngularJS line break at points after a maximum length was reached


javascript,angularjs
I'm using ng-repeat to fill a table. Some elements have a pretty long length, and I'm looking for a way to cut the content into multiple lines, if a specific length is reached. During research I found Angulars limitTo, but it does not exactly look like I was looking for....

How can this be undefined in the constructor of an Angular config class?


angularjs,constructor,typescript,undefined,this
I've found some examples online, where people create TypeScript config classes and pass them on to Angular. When I've tried it, I got the weird exception, that this was undefined. A closer look to the other implementations revealed, they only use the constructor, so, are those examples actually inherently wrong...

Handling 500 Internal Server Error from DomDocument in Laravel 5


php,laravel,exception-handling,laravel-5
The library I wrote for Laravel uses DomDocument. I use this library under my Controller, and its namespace is app/Services/Verify/. The library gets initialized and used when I put it some inputs into a form. When the library fails, Laravel would fail the way it would - returning the following...

HTML elements in Angular bindings expression


html,angularjs
Is that possible to insert HTML elements in an Angular expression ? Let's take a few example. I would like to do something like this: <table> <tr ng-repeat="employee in employees"> <td>{{employee.firstname ? employee.firstname : '<p style="color:red">No name</p>'}}</td> <td>{{employee.job}}</td> </tr> </table> In our controller, we have: $scope.employees = [{firstname:'Bob', job:'Developer'}, {firstname:'Paul',...

AngularJS, Animate on change: directive $watch not called


javascript,angularjs,angularjs-directive
I'm creating a live websocket application which requires grabbing the users attention upon change of a value. The following directive is used in multiple places on the same page: <span class="badge" animate-on-change animate-class="highlightWarning" animate-watch="totalAnswers">{{totalAnswers}}</span> and <div animate-on-change animate-class="colorWarning" animate-watch="rq.answer" ng-switch="question.type" ng-repeat="rq in recentResponse.answers" ng-if="rq.question == question.id"> Now, rq.answer rarely changes,...

angular.js - simplest way to handle click inside controller


javascript,jquery,html,angularjs
is there any better way of handling clicks inside a controller than this? <div ng-controller="SomeController> <a href="/#!/something" ng-click="doTheSame()">link1</a> <a href="/#!/something" ng-click="doTheSame()">link2</a> <a href="/#!/something" ng-click="doTheSame()">link3</a> .. <a href="/#!/something" ng-click="doTheSame()">link99</a> </div> in jQuery I would do something like: $('div > a').on('click', function() { // do some stuff }); ...

Laravel relation many to many with additional pivot


php,laravel,laravel-4
Status Update I have implemented morph to many relationship type but how can I insert into the addition field? The code for the polymorphic relation is: public function mailmessages() { return $this->morphToMany('Mailmessage','rel','mailmessage_rels','rel_id','mailmessage_rel_id') ->withPivot(['addition']); } Original Post I have a Laravel project that uses many to many relations and in the...

Angularjs $watchCollection on $rootScope not triggered when values updated from directive


javascript,angularjs,events,angularjs-directive,angularjs-watch
I'm running into a bit of an issue solving a problem with some Angularjs functionality I'm working on. The basic idea is that I have a system where certain criteria must be met before the user is allowed to advance to the next section of the app. One example of...

remove char from string with angular


javascript,angularjs
I'm trying to remove a period '.' from a value that comes from a feed, however I don't really want to do this in my app.js, rather in my view. So if I do the following: value: {{item.v_value}} I get 3.5, I'd simply like to strip out and render out...

Getting generic anchor text on click with angularJS/jQuery returns empty string


jquery,angularjs
I have an anchor generated from a JSON database query result. The anchor represents the title of an article (I have no idea how many articles there will be). I want to be able to get the anchor text (the article title), upon clicking the anchor in order to use...

Is there a way to fire an event every time an ajax call in made in AngularJS?


javascript,ajax,angularjs,express
What I'm trying to do is every time a call to the backend is made, I want a spinner to load up with a dark overlay. I know I can do this by simply running the spinner before the call is made, but I'm working with multiple developers and I...

Can't save json data to variable (or cache) with angularjs $http.get


json,angularjs,web-services,rest
I have weird angularjs problem. I'm trying to fetch data from Rest Webservice. It works fine, but I can't save json data to object. My code looks like: services.service('customerService', [ '$http', '$cacheFactory', function($http, $cacheFactory) { var cache = $cacheFactory('dataCache'); var result = cache.get('user'); this.getById = function(id){ $http.get(urlList.getCustomer + id).success(function(data, status,...

Create angular page in Django to consume data from JSON


angularjs,django,django-templates
In an angular controller I have a list of items: app.controller('MainController', ['$scope', function($scope) { $scope.items = [ {"foo":"bar 1"}, {"foo":"bar 2"}, {"foo":"bar n"} ] }]); The following html page, based on angular, displays a list of item: <!DOCTYPE html> <html> <head> <title>list</title> <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> </head> <body data-ng-app="myApp"> <div data-ng-controller="MainController">...

Angular $http and Fusion Tables in IE9


javascript,angularjs,internet-explorer-9,google-fusion-tables
I am trying a simple get request to a google fusion table in my angular controller. $http.get(url) .success(function(data) { //Do stuff with data }) This works in firefox, chrome, safari and IE10+ however in IE9 (Which I am requried to support) the request fails to even send and the console...

Merge and sum values and put them in an array


javascript,arrays,angularjs,foreach
I'm retrieving values from an external source and apply a foreach loop to the results, with the code below. angular.forEach(data, function(value, key) { if (value.start_date > firstdayOfWeek && value.start_date < lastdayOfWeek) { console.log(value.firstname + ' - ' + value.distance); } else { //do nothing } }); The result is console...

Angular ng-repeat cache (avoid re-rendering on state change)


javascript,angularjs,performance,caching,angularjs-ng-repeat
We have huge rendering spikes with ng-repeat in Angular application. Main page shows a huge list of cover images ("::" and "track by" are in place). On first load it works acceptable. But if user changes the state (we use UI-Router) and goes back to the home page afterwards then...

Laravel 4.2 Sending email error


php,email,laravel,laravel-4
Hello everyone I have an error in laravel when I am sending an email. I have a form with a select tag and when I select the user and click submit I need to send him a mail after I select it. Here is my Controller method: public function store()...

AngularJS & Bootstrap Modal - loading template outside controller


angularjs,twitter-bootstrap,angular-bootstrap
I have a dialog which is being used in 3 scenarios within the same page. I have created a controller similar to the below: var modalInstance = $modal.open({ templateUrl: 'myModalContent.html', controller: 'ModalInstanceCtrl', size: size, resolve: { items: function () { return $scope.items; } } }); <script type="text/ng-template" id="myModalContent.html"> <div class="modal-header">...

$scope variable does not update within $interval function


javascript,angularjs,angularjs-scope
I am using $interval for my custom stopwatch. Within the $interval function I have a variable $scope.inputValue which is binded to a range. The problem is that after each iteration of $interval (every 500ms), the most recent $scope.inputValue is not taken into account, but only the value at the initialization...

$http.get returns actual php script instead of running it (yeoman, grunt)


php,angularjs,pdo,gruntjs
I'm building a "simple" AngularJS app with an articles newsfeed. My articles are stored in a mysql database, and I extract them using php PDO. I used to do this using AJAX with a simple LAMP configuration (php5, mysql, apache2), and everything worked as intended. Now I'm trying to rebuild...

Passing params to an angular service from a controller?


javascript,angularjs,service,controller,params
I'm an angular newby. I'm hoping to pass params to a service that fetches data form a server depending on those params. for example, if I want to pass a book name string and then use it in the service to concatenate with the request url. The documentation does not...

Pre-Select of an option in a select not working


angularjs
I use the following select. Currently, I get empty options in my select on start. To avoid these empty options in angularJS, I want to preselect the first option in the select. But It do not work. I get an 'Cannot read property 'conditions' of undefined'. Thank you for your...

How to register global variable for my Laravel application?


php,laravel,laravel-5
I have started with Laravel a few days ago, and today I just installed the vespakoen/menu that seems to be very nice, and probably will work for what I need it. Currently I have installed Laravel 5.1 on my system. The problem I currently have, is where to register my...