Binding Web Api with AngularJS

Question

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?

$resourcecan help you to resolve this.

Kain
– Kain

2013-11-28 08:29:06 +00:00
Commented Nov 28, 2013 at 8:29 — Kain
– Kain, Commented Nov 28, 2013 at 8:29

Doug Lampe · Accepted Answer · 2014-11-12 03:02:26Z

1

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.

answered Nov 12, 2014 at 3:02

Doug Lampe

1,46516 silver badges8 bronze badges

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

Collectives™ on Stack Overflow

Binding Web Api with AngularJS

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