How to update ng-model inside ng-repeat

Question

How do you update ng-model from view in this case?

I am having a problem updating my ng-model. Sorry if this with errors or I am doing something wrong! I am pretty new to web development!

My HTML code looks something like this:

<div id="loadedCart" ng-show="ifLoadCart">
        <div ng-repeat="book in cartbooks" repeat-finish>
            <br>
            <!--<img src="book.path" alt="img of book"></img>-->
            <h6 ng-click="deleteBook(book.id)">{{book.name}}</h6>
            <h6>{{book.authors}}</h6>
            <h6>{{book.price}}</h6>
            <h6>{{book.qboy}}</h6>
            <input ng-model="thisoneshould" type="number" min="0" required>
            <input type="submit" ng-click="changeQuant(book.id)" value="Update quantity">
            <br><br><br>
        </div>
        <div><button ng-click="checkout()">Checkout</button></div>
    </div>

And my code in the controller looks something like this:

    $scope.thisoneshould = 0;
    //other variables that are defined...

    $scope.changeQuant = function(x){
        $scope.updateCart(x);
    }
    $scope.updateCart = function(x){
        $scope.showLoginErrorMsg = false;
        $scope.needToLogin = false;
        $scope.showLoginErrorMsg = false;
        $scope.ifhomepage = false;
        $scope.ifSuccessful = false;
        $scope.ifbookpage = false;
        $scope.ifcheckpage = false;
        $scope.ifShowQuantity = false;
        $scope.additionSuccess = false;
        $scope.ifLoadCart = true;
        console.log(x);
        console.log($scope.thisoneshould);
        //$scope.cartbooks = [];
        if ($scope.thisoneshould!=0)
        {
            console.log($scope.thisoneshould);
            $http.put('updatecart',{'bookId': x, 'quantity': $scope.thisoneshould}).then(function(response){
                $scope.itemsInCart = response.data;
           });
        }
        else {
            $http.delete('deletefromcart/'+x).then(function(response){
                $scope.itemsInCart = response.data;
            });
        }
    }

Can someone tell me what seems to be the problem with my code, why it is wrong and how do I fix it?

what do you mean by not updating? you are not updating anywhere — Sajeetharan, Apr 29 '18 at 16:13
Oh! I am sorry I just started angular day before. How do you update the model in my case? @Sajeetharan Because I thought just giving input ng-model would do. — coder123, Apr 29 '18 at 16:15
you want `ng-model` assigned to some property of `book` probably .... `ng-model="book.someProperty"` — charlietfl, Apr 29 '18 at 16:26
But I want to detect what was written in the input box and then give $scope.thisoneshould that value — coder123, Apr 29 '18 at 16:28
Follow the rule of always have a dot in your ng-models. See [What are the nuances of scope prototypal / prototypical inheritance in AngularJS?](https://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs/14049482#14049482). — georgeawg, Apr 29 '18 at 17:10

score -1 · Accepted Answer · answered Apr 29 '18 at 16:36

-1

You need to notify the controller whenever the value is changed. Some sort of event to update the value in controller.

Angularjs is anyways offers the feature of two way data binding. your variable should have the updated value. In the below example i am using ng-change with ng-model

DEMO

// Code goes here

var app =angular.module('testApp',[])
app.controller('testCtrl',function($scope){
   $scope.updated = 0;
   $scope.print = function(test){
     console.log(test);
   }
});

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  </head>
  <body ng-app="testApp" ng-controller="testCtrl">
     <input ng-model="thisoneshould" ng-change="print(thisoneshould)" type="number" min="0" required>
  </body>
</html>

answered Apr 29 '18 at 16:36

Sajeetharan

216,225
63
350
396

Thank you! I also wanted to clarify if I do this, since ng-repeat has the same variable for different input boxes, will it affect any thing? As the other values will not change? – coder123 Apr 29 '18 at 16:46
if you have the same variable indeed it will have an effect. otherwise no need to worry – Sajeetharan Apr 29 '18 at 16:47
Ok the value of thisoneshould is changing when I console.log it. But when I use it in some other function, it says undefined. Any insights on it! – coder123 Apr 29 '18 at 16:54
you have to pass to the function when you are calling $scope.2ndfunc($scope.thisoneshould) and use it inside 2nd function – Sajeetharan Apr 29 '18 at 16:56
btw as @georgeawg mentioned above you should always use ng-model over an object – Sajeetharan Apr 29 '18 at 17:25

How to update ng-model inside ng-repeat

How do you update ng-model from view in this case?

1 Answers1