How do you retrieve a textbox entry in AngularJS using $scope and ng-bind

Question

I'm currently dabbling with extending the Umbraco back office and for this I need to use Angular Js. It's going pretty well so far and I have hooked up a button that fires a request to a WebApi controller and returns a confirmation that a service update has taken place however, I would now like to include a textbox where the user can enter a number that is then appended as a querystring parameter to the the WebApi call in AngularJs.

Here is my code so far:

HTML:

<div ng-controller="AxumUpdateService">
    <h3>Axum Synchronisation</h3>
    <p>The following methods will allow you to trigger manual updates of your Umbraco site by making use of some web services</p>
    <div class="update-type clearfix">
        <div class="left-col">
            <h4>Update All Group Tours</h4>
            <p>Synchronise all changes to group tours that have occured in the past 24 hours.</p>
            <input type="text" ng-bind="tourId" />
        </div>
        <div class="center-col">
            <button class="button button-axum" type="button" ng-click="getAll()" ng-hide="load">Update</button>
        </div>
        <div class="right-col">
            <img src="/App_Plugins/Dashboards/loader.gif" ng-show="load" />
            <span ng-bind="info"></span>
        </div>
    </div>
    <div class="update-footer">
        <img src="/App_Plugins/Dashboards/logo.png" />
    </div>
</div>

AxumUpdateService.service.js

angular.module("umbraco.services").factory("AxumUpdateService", function ($http) {
    return {
        getAll: function () {
            return $http.get("/umbraco/api/Axum/GetAllGroupTours");
        }
    }
});

AxumUpdateService.controller.js

angular.module("umbraco")
    .controller("AxumUpdateService",
    function ($scope, $http, AxumUpdateService) {
        $scope.getAll = function () {
            $scope.load = true;
            console.log($scope.tourId);
            $scope.info = "Retreiving updates";
            AxumUpdateService.getAll().success(function (data) {
                $scope.result = data;
                $scope.info = data;
                $scope.load = false;
            });
        };
    });

The problem is where I am using $scope.tourId as it doesn't appear to be retrieving any of the values I enter into the textbox that is bound with ng-bind. How do I retreive these user entered values using AngularJs?

score 1 · Answer 1 · answered Jan 29 '15 at 16:46

1

You should use ng-model. I think that's a better case for it.

So change your input field to:

<input type="text" ng-model="tourId" />

And you can pass that value in with the WebAPI

answered Jan 29 '15 at 16:46

hanothan

231
1
7

How do you retrieve a textbox entry in AngularJS using $scope and ng-bind

1 Answers1