2015-01-29 5 views
0

현재 Umbraco 백 오피스를 확장하는 데 협조 중입니다.이 경우 Angular Js를 사용해야합니다. 지금까지 꽤 잘 진행되어 왔고 WebApi 컨트롤러에 요청을 보내고 서비스 업데이트가 수행되었다는 확인을 반환하는 버튼을 연결했지만 이제 사용자가 입력 할 수있는 텍스트 상자를 포함하고자합니다. 그런 다음 AngerJs의 WebApi 호출에 대한 쿼리 문자열 매개 변수로 추가됩니다. 여기

지금까지 내 코드입니다 :

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; 
      }); 
     }; 
    }); 

문제 어디 있니? ng-bind로 바인드 된 텍스트 상자에 입력 한 값을 검색하는 것으로 보이지 않으므로 $ scope.tourId를 사용하고 있습니다. AngularJs를 사용하여 사용자가 입력 한 값을 검색하려면 어떻게합니까?

답변

1

ng-model을 사용해야합니다. 나는 그게 더 좋은 경우라고 생각한다.

그래서 당신의 입력 필드에 변경 :

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

을 그리고 당신은 WebAPI에 그 값을 전달할 수 있습니다