cannot bind angular js to controller member

Question

I have this controller

'use strict';

var opsToolControllers = angular.module('opsToolControllers');

opsToolControllers.controller('payoutCtrl', ['$scope', '$location', 'Util', 'User', 'Payout', function ($scope, $location, Util, User, Payout) {

    $scope.refundReasons = ["1 -- No show compensation", "2 -- Bonus not paid"];
    $scope.userId = null;
    $scope.totalPay = null;

    function init() {
        $scope.status = null;
        $scope.payouts = null;
        $scope.pending = null;
        $scope.showPayoutsInfo = false;
        $scope.showPendingInfo = false;
    };

    function successCallBack(response) {
        $scope.opStatus = Util.parseError('OK');
        $scope.transactionId = "";
        Util.stopProcessIndication();
    };

    function errorCallBack(response) {
        $scope.status = Util.parseError(response);
        Util.stopProcessIndication();
    };


    $scope.payDriver = function (userId, totalPay, chosenReason) {
        Payout.payDriver(userId, totalPay, chosenReason, successCallBack, errorCallBack())
    };

    $scope.userId = $location.search().userId;
    if ($scope.userId) {
        $scope.getUserPayouts($scope.userId);
    }

    $scope.validateTotal = function(obj, total) {
        $scope.totalPay = 150;

        $scope.inputNum.value = parseInt($scope.slider.value);
    };

}]);

and this html

    <input type="number" id="input_total" class="form-control" ng-model="$scope.totalPay" id="totalPay" required ng-change="validateTotal(this, totalPay)">


    <select ng-options="reason for reason in refundReasons" required ng-model="chosenReason">
        <option value="">Select refund reason</option>
    </select>
<br>

<button class="btn btn-primary" ng-click="payDriver(userId, totalPay, chosenReason)">Pay driver</button>

</p>

what am i missing as the <input> doesn't do two way binding with the $scope.totalPay

I mean not when I call payDriver(...) and not when the validator override the $scope.totalPay

score 1 · Answer 1 · answered Apr 16 '18 at 16:51

1

Juse use totalPay

 <input type="number" id="input_total" class="form-control" ng-model="totalPay" id="totalPay" required ng-change="validateTotal(this, totalPay)">

answered Apr 16 '18 at 16:51

Sajeetharan

216,225
63
350
396

it didn't help `$scope.totalPay = 150;` in the validator doesn't effects the ui – Elad Benda Apr 16 '18 at 16:59
This is right, you shouldn't use '$scope' reference in your view. – Stradosphere Apr 16 '18 at 20:56
@Sajeetharan no errors, but `Risalat Zaman` worked for me. why is it? – Elad Benda Apr 17 '18 at 08:01
when you are using a ng-model it should be on a object – Sajeetharan Apr 17 '18 at 08:02

Risalat Zaman · Accepted Answer · 2018-04-16T18:38:19.620

0

Try this. In your controller declare your totalPay variable like this.

$scope.total = {};
$scope.total.totalPay = null;

Then in your html

<input type="number" id="input_total" class="form-control" ng-model="total.totalPay" id="totalPay" required ng-change="validateTotal(this, totalPay)">

edited Apr 16 '18 at 18:38

answered Apr 16 '18 at 18:32

Risalat Zaman

1,189
1
9
19

Umm did you even try the solution before downvoting it ? – Risalat Zaman Apr 17 '18 at 06:38
Read up on this https://stackoverflow.com/a/14049482/8814332 TLDR : If you want your two way binded variables to work in the expected manner, you need to have two dots in their name. – Risalat Zaman Apr 17 '18 at 08:18

cannot bind angular js to controller member

2 Answers2