AngularJs scope undefined while binding a textbox

Question

Trying to bind data to input control from scope using below code.

var app = angular.module('ng_app', []);

app.controller("ITEM_Ctrl", function ($scope, $http) {
    var PlantId = "abcFC"; $scope.mdItemId; $scope.mdFlavorId; $scope.itemDtls = {};
    $http({
        method: 'GET',
        url: 'http://localhost:12752/api/Item/GetItem',
        params: { Plant_Id: PlantId, Item_Id: '1234567' }
    }).then(function successCallback(response) {
        debugger;
        //  $scope.itemDtls = {};   
alert(response.data);  --> in alert msg as  [object Object]            
    //    $scope.itemDtls = response.data; -->  ReferenceError: itemDtls is not defined
      //  $scope.testmdItemId = itemDtls.ITEM_ID;
        //  $scope.itemDtls =   response.data;
     //   $scope.mdItemId = response.data.ITEM_ID;  --> scope mdItemId undefined
       // $scope.mdItemId = JSON.parse(response.data.ITEM_ID);
       // $scope.mdFlavorId = JSON.parse(response.data.FLAVOR_ID);
      //.mdFlavorId = "test data";  -- > binding successfully
        $scope.itemDtls = response.data;
            $scope.mdItemId = itemDtls.ITEM_ID;
            $scope.mdFlavorId = response.data.FLAVOR_ID;    
    }, function errorCallback(response) {

    });
});

Tried in different ways to bind to input control as above but getting msg as scope undefined.

<body ng-app="ng_app">
    <table ng-controller="ITEM_Ctrl">
        <tr>              
            <td>
                <div>                   
                    <input type="text" id="itemid"  ng-model="mdItemId" />
                </div>
                <div>                 
                    <input type="text" id="flavorid"  ng-value="mdFlavorId" />
                </div>                
            </td>
        </tr>
    </table>

You probably need to define your variables outside of the AJAX request, and then you can update them in the success handler. My guess is when the template is loading, those variables don't exist. — JoshG
– JoshG, Commented Mar 12, 2019 at 11:04
Try defining your variables with an extra level, something like $scope.This_Controller.mdItemId and $scope.This_Controller.mdFlavorId, and then refer to them within the page as This_Controller.mdItemId and This_Controller.mdFlavorId. Cannot explain why, but this solved a similar problem I had in the past. Also, as suggested by @AndroidNoobie, you should defined them at the controller's level and not inside any function contained there. — FDavidov
– FDavidov, Commented Mar 12, 2019 at 11:34

user2522503 · Accepted Answer · 2019-03-12 12:46:35Z

0

Try like this.

 var itemDtls  = response.data;
 $scope.mdItemId = itemDtls [0].ITEM_ID;

answered Mar 12, 2019 at 12:46

user2522503

1783 silver badges13 bronze badges

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

Collectives™ on Stack Overflow

AngularJs scope undefined while binding a textbox

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related