angularjs - on success get new data but model not updated ?

Reply

a.amin

Member

51 Points

449 Posts

angularjs - on success get new data but model not updated ?

Jul 07, 2017 01:17 AM|a.amin|LINK

Hi

please i try to use angular ui typeahead - i can get data and it works fine, but i try to refresh auto complete data after i add new client to database but it's not updated i don't know why that i call method that fill auto complete in add client on success

 function getClient() {
        var getAllExtraFor = spacrudService.GET("/api/InvoiceMasterApi/GetClient");

        getAllExtraFor.then(function (data) {
            debugger;
            $scope.clients = data.data; // edit this line according to your api 
        },
            function (errorPl) {
                return;
            });
    };

and in add client method i call getClient() again it's get the new data but not applied to autocomplete ??!

    $scope.saveNewClient = function () {
        if ($scope.Invalid == false) {
            var appointmentToAdd = spacrudService.POST("/api/ClientsApi", $scope.NewClient);

            appointmentToAdd.then(function (data) {
                // Close Modal
                $("#ClientModal").modal("toggle");

                    toastr.success("Client Saved ...");

                $scope.NewClient = [];
                $scope.NewClient = { ClientName: "", DeleteRecStatus: 0 };


                getClient(); // i cal method here but autocomplete not updated

            },
                function (errorPl) {
                });
        }
    };

auto complete html:

<input type="text" style="text-align: right; border-bottom-left-radius: 4px; border-top-left-radius: 4px; font-family: 'DroidKufi-Regular'"
                                       ng-model="ClientID"
                                       placeholder="Client Name"
                                       uib-typeahead="c as c.ClientName for c in clients  | filter:$viewValue | limitTo:8"
                                       class="form-control"
                                       typeahead-show-hint="true"
                                       typeahead-min-length="0"
                                       typeahead-editable="false"
                                       typeahead-on-select="onSelect($item)"
                                       ng-change="ClearSelection()"
                                       typeahead-no-results="noResults" />

so please how can i make it works and make autocomplete updated ...?

__________________
Best Regards
Eng.Ahmed Amin
ahmed.mo.amin@gmail.com

Reply

Billy Liu

Contributor

2260 Points

815 Posts

Re: angularjs - on success get new data but model not updated ?

Jul 07, 2017 07:47 PM|Billy Liu|LINK

Hi a.amin,

a.amin

               getSupplier(); // i cal method here but autocomplete not updated

What's the getSupplier()? Should it be getClient()?

And have you set $scope.branches in getClient()?

Best Regards

Billy

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

Reply

a.amin

Member

51 Points

449 Posts

Re: angularjs - on success get new data but model not updated ?

Jul 07, 2017 09:32 PM|a.amin|LINK

so sorry i has an mistake when when i copy my code

Get Client:

 function getClient() {
        var getAllExtraFor = spacrudService.GET("/api/InvoiceMasterApi/GetClient");

        getAllExtraFor.then(function (data) {
            debugger;
            $scope.clients = data.data; // edit this line according to your api 
        },
            function (errorPl) {
                return;
            });
    };

add new Client:

    $scope.saveNewClient = function () {
        if ($scope.Invalid == false) {
            var appointmentToAdd = spacrudService.POST("/api/ClientsApi", $scope.NewClient);

            appointmentToAdd.then(function (data) {
                // Close Modal
                $("#ClientModal").modal("toggle");

                    toastr.success("Client Saved ...");

                $scope.NewClient = [];
                $scope.NewClient = { ClientName: "", DeleteRecStatus: 0 };


                getClient(); // i cal method here but autocomplete not updated

            },
                function (errorPl) {
                });
        }
    };

autocomplete code:

<input type="text" style="text-align: right; border-bottom-left-radius: 4px; border-top-left-radius: 4px; font-family: 'DroidKufi-Regular'"
                                       ng-model="ClientID"
                                       placeholder="Client Name"
                                       uib-typeahead="c as c.ClientName for c in clients  | filter:$viewValue | limitTo:8"
                                       class="form-control"
                                       typeahead-show-hint="true"
                                       typeahead-min-length="0"
                                       typeahead-editable="false"
                                       typeahead-on-select="onSelect($item)"
                                       ng-change="ClearSelection()"
                                       typeahead-no-results="noResults" />

__________________
Best Regards
Eng.Ahmed Amin
ahmed.mo.amin@gmail.com

Reply

a.amin

Member

51 Points

449 Posts

Re: angularjs - on success get new data but model not updated ?

Jul 07, 2017 09:34 PM|a.amin|LINK

i have edit the post, thanks

__________________
Best Regards
Eng.Ahmed Amin
ahmed.mo.amin@gmail.com

Reply

Billy Liu

Contributor

2260 Points

815 Posts

Re: angularjs - on success get new data but model not updated ?

Jul 08, 2017 05:00 AM|Billy Liu|LINK

Hi a.amin,

Do you have any error message in browser console(F12)?

I think you could try to repleace the getclient() with the code, for example:

$scope.saveNewClient = function () {
        if ($scope.Invalid == false) {
            var appointmentToAdd = spacrudService.POST("/api/ClientsApi", $scope.NewClient);

            appointmentToAdd.then(function (data) {
                // Close Modal
                $("#ClientModal").modal("toggle");

                    toastr.success("Client Saved ...");

                $scope.NewClient = [];
                $scope.NewClient = { ClientName: "", DeleteRecStatus: 0 };


               var getAllExtraFor = spacrudService.GET("/api/InvoiceMasterApi/GetClient");

               getAllExtraFor.then(function (data) {
               debugger;
               $scope.clients = data.data; // edit this line according to your api 
               },
               function (errorPl) {
                return;
            });

            },
                function (errorPl) {
                });
        }
    };

Best Regards

Billy

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

Reply

a.amin

Member

51 Points

449 Posts

Re: angularjs - on success get new data but model not updated ?

Jul 08, 2017 12:00 PM|a.amin|LINK

Billy Liu

Hi a.amin,

Do you have any error message in browser console(F12)?

I think you could try to repleace the getclient() with the code, for example:

$scope.saveNewClient = function () {
        if ($scope.Invalid == false) {
            var appointmentToAdd = spacrudService.POST("/api/ClientsApi", $scope.NewClient);

            appointmentToAdd.then(function (data) {
                // Close Modal
                $("#ClientModal").modal("toggle");

                    toastr.success("Client Saved ...");

                $scope.NewClient = [];
                $scope.NewClient = { ClientName: "", DeleteRecStatus: 0 };


               var getAllExtraFor = spacrudService.GET("/api/InvoiceMasterApi/GetClient");

               getAllExtraFor.then(function (data) {
               debugger;
               $scope.clients = data.data; // edit this line according to your api 
               },
               function (errorPl) {
                return;
            });

            },
                function (errorPl) {
                });
        }
    };

Best Regards

Billy

No any Error on console - i try code as you told me but nothing ... :(

__________________
Best Regards
Eng.Ahmed Amin
ahmed.mo.amin@gmail.com

Reply

Billy Liu

Contributor

2260 Points

815 Posts

Re: angularjs - on success get new data but model not updated ?

Jul 10, 2017 02:16 AM|Billy Liu|LINK

Hi a.amin,

a.amin
$scope.clients = data.data; // edit this line according to your api

What's the value of data.data? Does it contain the new client?

I'm using the following test code. Does it work at your place?

 <script>
        var app = angular.module('myApp', ['ui.bootstrap']).controller('myCtrl', function ($scope) {
            $scope.clients = [
               { 'ClientName': 'aaa' },
               { 'ClientName': 'bbb' },
               { 'ClientName': 'ccc' }
            ];
            $scope.saveNewClient = function () {              
                              getclient();
                };

            function getclient() {
                $scope.clients = [
                       { 'ClientName': 'aaa' },
                       { 'ClientName': 'bbb' },
                       { 'ClientName': 'ccc' },
                       { 'ClientName': 'ddd' }
                ];
            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div ng-app="myApp" ng-controller="myCtrl">
            <input type="text" style="text-align: right; border-bottom-left-radius: 4px; border-top-left-radius: 4px; font-family: 'DroidKufi-Regular'"
                ng-model="ClientID"
                placeholder="Client Name"
                uib-typeahead="c as c.ClientName for c in clients  | filter:$viewValue | limitTo:8"
                class="form-control"
                typeahead-show-hint="true"
                typeahead-min-length="0"
                typeahead-editable="false"
                typeahead-on-select="onSelect($item)"
                ng-change="ClearSelection()"
                typeahead-no-results="noResults" />
            <input type="button" ng-click="saveNewClient()" value="button" />
        </div>
    </form>

Or could you show me your all code that I can help you to solve it?

Best Regards

Billy

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

angularjs - on success get new data but model not updated ? RSS

6 replies

Shortcuts

angularjs - on success get new data but model not updated ?

Re: angularjs - on success get new data but model not updated ?

Hi a.amin,

a.amin

Re: angularjs - on success get new data but model not updated ?

Re: angularjs - on success get new data but model not updated ?

Re: angularjs - on success get new data but model not updated ?

Hi a.amin,

Re: angularjs - on success get new data but model not updated ?

Billy Liu

Hi a.amin,

Re: angularjs - on success get new data but model not updated ?

Hi a.amin,

a.amin