angularjs object is not a function error

Question

I am trying to send a repeater array items to web api controller method as parameter. When I click the button containing the function its giving me this error in console and nothing happens.

object is not a function

I guess I'm passing the orders array in a wrong way. How to do that correctly.

My ng-repeat

    <table class="table table-bordered table-hover" style="width:800px" data-ng-model="orderProduct">
            <tr data-ng-repeat="order in orders">
                <td>{{selectedProduct.pname}}</td>
                <td>{{order.pid}}</td>
                <td>{{order.oid}}</td>
                <td>{{order.qty}}</td>
                <td>{{order.total}}</td>
            </tr>
        </table>
        <input type="button" data-ng-click="addOrder()" class="btn btn-danger" data-ng-disabled="!orders.length" value="Submit Orders" />

My controller method $scope

    $scope.addOrder = function () {
            var orders = this.orders;
            $http.post('/api/OrderDetails/', orders).success(function (data) {
                alert("Added Successfully!!");
                $scope.addMode = false;

            }).error(function (data) {
                $scope.error = "An Error has occured while Adding Order details! " + data;

            });
        };

I recommend that you use the non-minimized version of angularjs during development. Much easier to debug. — Andrew Eisenberg
– Andrew Eisenberg, Commented Jul 2, 2014 at 5:13
I recommend that you start using Chrome Dev Tools, Firebug, or IE dev tools, open up your source code and step through the debugger. You will likely find something. — Andrew Eisenberg
– Andrew Eisenberg, Commented Jul 2, 2014 at 5:18
changed to nonminified version and got this in chrome pastebin.com/raw.php?i=J3gvMqGz — coder
– coder, Commented Jul 2, 2014 at 5:19

Jaya · Accepted Answer · 2014-07-02 07:47:02Z

1

What I figured from your plunk is that - the form-name and a controller's method name can not be the same. I changed the form-name from addOrder to addOrderForm Once the names have changed, this works correctly. Please see working plunk here: http://plnkr.co/edit/CfaNY9z5vVMi5uqh5v7k?p=preview

PS: I've taken the liberty of adding some json and angular code to get the form working.

answered Jul 2, 2014 at 7:47

Jaya

264 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

coder Over a year ago

but your answer is more precisely described with the reason of why this happened. Thank you

Cœur Over a year ago

Whilst this may theoretically answer the question, it would be preferable to include the essential parts of the answer here, and provide the link for reference. Please edit the post and update the answer.

coder · Accepted Answer · 2014-07-02 07:28:31Z

1

After thinking for a while about the line

object is not a valid function

and the other error from firefox

fnPtr is not a function

It suddenly buzzed in my mind that there maybe something fishy with my function naming. I guess it's silly but after changing the function name from addOrder() to addorder(), that is after replacing the capital 'O' with small 'o' the error has gone and everything working smoothly. Peace!!

answered Jul 2, 2014 at 7:28

coder

973 gold badges4 silver badges11 bronze badges

Collectives™ on Stack Overflow

angularjs object is not a function error

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related