Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="//cdnjs.cloudflare.com/ajax/libs/rxjs/2.3.0/rx.all.js"></script>
  <script src="https://rawgit.com/Reactive-Extensions/rx.angular.js/master/rx.angular.js"></script>
</head>
<body ng-app="app">
  <div class="container">
    <div class="page-header">
      <h1>RxJS for AngularJS Bindings AutoComplete example use $eventToObservable</h1>
      <p class="lead">Example to show combining input events such as keyup with Ajax requests</p>
    </div>
    <div class="row-fluid" ng-controller="WikiSearchController">
      <form ng-submit="submit(search)">
        <div class="form-group">
          <label for="textInput">Enter Query for Wikipedia</label>
          <input type="text" id="textInput" ng-model="search" class="form-control" placeholder="Enter Query...">
        </div>
        <button class='btn btn-primary'>Search</button>
      </form>
    </div>
    <div class="row-fluid" ng-controller="WikiDisplayController">    
      <ul id="results">
        <li ng-repeat="result in results">
        {{ result }}
      </li>
      </ul>
    </div>
  </div>
</body>
</html>
 
var app = angular.module('app', ['rx']);
​
app.controller('WikiSearchController', ['$scope', '$rootScope', function($scope, $rootScope) {
  $scope.search = '';
  $scope.submit = function(term) {
    $rootScope.$broadcast('term', term);
  };
}]);
​
app.controller('WikiDisplayController', ['$scope', '$http', 'rx', function($scope, $http, rx) {
    function searchWikipedia (term) {
                var deferred = $http({
                        url: "http://en.wikipedia.org/w/api.php?&callback=JSON_CALLBACK",
                        method: "jsonp",
                        params: {
                            action: "opensearch",
                            search: term,
                            format: "json"
                        }
                    });
​
                return rx.Observable
                    .fromPromise(deferred)
                    .map(function(response){ return response.data[1]; });
            }
​
​
            $scope.results = [];
            $scope.$eventToObservable('term')
                .map(function (data) { return data.additionalArguments[0]; })
                .flatMapLatest(searchWikipedia)
                .subscribe(function(results) {
                    $scope.results = results;
                });
}]);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x