CODEWITHSUNDEEP
asp.net-mvc-4angularjsasp.net-web-api
Gericke
Gericke

Reputation: 2241

Binding Web Api with AngularJS

I am very new with AngularJS and Web Api. I have angular controller that calls my a method in the Web Api. I am trying to bind the data to my DOM but I do not exceed to doing so. The Api only return 1 single object.

Angular Controller:

function adminManageUsersController($scope, $http) {
    $scope.data = [];

    $http.get("/api/adminapi?Id=2")
      .then(function (result) {
        //Success
        angular.copy(result.data, $scope.data);
        //$scope.data = angular.fromJson(result.data);
    },
       function () {
           //Error
       }
    );
};

HTML: 

<div data-ng-controller="adminManageUsersController">
    <div class="form-horizontal" ng-model="data">
        <div class="form-group">
            <label class="control-label col-lg-3 col-md-4">Employee Number</label>
            <div class="col-lg-5 col-md-6">
               <input type="number" class="form-control" ng-model="EmployeeNumber" />
                <div>{{ EmployeeNumber }}</div>
            </div>
        </div>
    </div>
</div>

What am I doing wrong?

Upvotes: 0

Views: 1172

Answers (1)

Doug Lampe
Doug Lampe

Reputation: 1466

All you need to do is correct your reference to EmployeeNumber:

<div>{{ data.EmployeeNumber }}</div>

and

<input type="number" class="form-control" ng-model="data.EmployeeNumber" />

Your use of ng-model on the div doesn't do what you seem to think. It is useful for tags such as the input where it will cause two-way binding of the property to the value of the input box by default. So once you correct your references, then changes to the input box would also update the value in your div.

Angular always evaluates relative to $scope so {{ EmployeeNumber }} is looking for $scope.EmployeeNumber. Since angular is very fault-tolerant, it doesn't give you an error, it just displays nothing.

Upvotes: 1

Related Questions