Clever Geek Handbook

Angular typeahead code does not work on its own Angular web page example web page framework

I am using angular foundation as my site form

http://pineconellc.github.io/angular-foundation/

and when i click on their plunker then when i type something in the textbox its not working

This is their plucker

http://plnkr.co/edit/5bcGtC6MknYhNACpRqt4?p=preview

I want to see a minimal working example of this type code.

Can someone please see what the problem is

You can search by type ahead and click "Edit in Plunker" on your website.

http://pineconellc.github.io/angular-foundation/

Their code looks fine. Even this minimal code doesn't work either.

<h4>Static arrays</h4>
<pre>Model: {{selected | json}}</pre>
<input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">
+3


source to share


2 answers


Please see a working demo below

angular.module('plunker').controller('TypeaheadCtrl', function($scope, $http) {

instead

angular.module('foundationDemoApp').controller('TypeaheadCtrl', function($scope, $http) {


angular.module ('plunker'). controller ('TypeaheadCtrl', function ($ scope, $ http) {

angular.module('plunker', ['mm.foundation']);
angular.module('plunker').controller('TypeaheadCtrl', function($scope, $http) {

  $scope.selected = undefined;
  $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];
  // Any function returning a promise object can be used to load values asynchronously
  $scope.getLocation = function(val) {
    return $http.get('http://maps.googleapis.com/maps/api/geocode/json', {
      params: {
        address: val,
        sensor: false
      }
    }).then(function(res) {
      var addresses = [];
      angular.forEach(res.data.results, function(item) {
        addresses.push(item.formatted_address);
      });
      return addresses;
    });
  };

  $scope.statesWithFlags = [{
    "name": "Alabama",
    "flag": "5/5c/Flag_of_Alabama.svg/45px-Flag_of_Alabama.svg.png"
  }, {
    "name": "Alaska",
    "flag": "e/e6/Flag_of_Alaska.svg/43px-Flag_of_Alaska.svg.png"
  }, {
    "name": "Arizona",
    "flag": "9/9d/Flag_of_Arizona.svg/45px-Flag_of_Arizona.svg.png"
  }, {
    "name": "Arkansas",
    "flag": "9/9d/Flag_of_Arkansas.svg/45px-Flag_of_Arkansas.svg.png"
  }, {
    "name": "California",
    "flag": "0/01/Flag_of_California.svg/45px-Flag_of_California.svg.png"
  }, {
    "name": "Colorado",
    "flag": "4/46/Flag_of_Colorado.svg/45px-Flag_of_Colorado.svg.png"
  }, {
    "name": "Connecticut",
    "flag": "9/96/Flag_of_Connecticut.svg/39px-Flag_of_Connecticut.svg.png"
  }, {
    "name": "Delaware",
    "flag": "c/c6/Flag_of_Delaware.svg/45px-Flag_of_Delaware.svg.png"
  }, {
    "name": "Florida",
    "flag": "f/f7/Flag_of_Florida.svg/45px-Flag_of_Florida.svg.png"
  }, {
    "name": "Georgia",
    "flag": "5/54/Flag_of_Georgia_%28U.S._state%29.svg/46px-Flag_of_Georgia_%28U.S._state%29.svg.png"
  }, {
    "name": "Hawaii",
    "flag": "e/ef/Flag_of_Hawaii.svg/46px-Flag_of_Hawaii.svg.png"
  }, {
    "name": "Idaho",
    "flag": "a/a4/Flag_of_Idaho.svg/38px-Flag_of_Idaho.svg.png"
  }, {
    "name": "Illinois",
    "flag": "0/01/Flag_of_Illinois.svg/46px-Flag_of_Illinois.svg.png"
  }, {
    "name": "Indiana",
    "flag": "a/ac/Flag_of_Indiana.svg/45px-Flag_of_Indiana.svg.png"
  }, {
    "name": "Iowa",
    "flag": "a/aa/Flag_of_Iowa.svg/44px-Flag_of_Iowa.svg.png"
  }, {
    "name": "Kansas",
    "flag": "d/da/Flag_of_Kansas.svg/46px-Flag_of_Kansas.svg.png"
  }, {
    "name": "Kentucky",
    "flag": "8/8d/Flag_of_Kentucky.svg/46px-Flag_of_Kentucky.svg.png"
  }, {
    "name": "Louisiana",
    "flag": "e/e0/Flag_of_Louisiana.svg/46px-Flag_of_Louisiana.svg.png"
  }, {
    "name": "Maine",
    "flag": "3/35/Flag_of_Maine.svg/45px-Flag_of_Maine.svg.png"
  }, {
    "name": "Maryland",
    "flag": "a/a0/Flag_of_Maryland.svg/45px-Flag_of_Maryland.svg.png"
  }, {
    "name": "Massachusetts",
    "flag": "f/f2/Flag_of_Massachusetts.svg/46px-Flag_of_Massachusetts.svg.png"
  }, {
    "name": "Michigan",
    "flag": "b/b5/Flag_of_Michigan.svg/45px-Flag_of_Michigan.svg.png"
  }, {
    "name": "Minnesota",
    "flag": "b/b9/Flag_of_Minnesota.svg/46px-Flag_of_Minnesota.svg.png"
  }, {
    "name": "Mississippi",
    "flag": "4/42/Flag_of_Mississippi.svg/45px-Flag_of_Mississippi.svg.png"
  }, {
    "name": "Missouri",
    "flag": "5/5a/Flag_of_Missouri.svg/46px-Flag_of_Missouri.svg.png"
  }, {
    "name": "Montana",
    "flag": "c/cb/Flag_of_Montana.svg/45px-Flag_of_Montana.svg.png"
  }, {
    "name": "Nebraska",
    "flag": "4/4d/Flag_of_Nebraska.svg/46px-Flag_of_Nebraska.svg.png"
  }, {
    "name": "Nevada",
    "flag": "f/f1/Flag_of_Nevada.svg/45px-Flag_of_Nevada.svg.png"
  }, {
    "name": "New Hampshire",
    "flag": "2/28/Flag_of_New_Hampshire.svg/45px-Flag_of_New_Hampshire.svg.png"
  }, {
    "name": "New Jersey",
    "flag": "9/92/Flag_of_New_Jersey.svg/45px-Flag_of_New_Jersey.svg.png"
  }, {
    "name": "New Mexico",
    "flag": "c/c3/Flag_of_New_Mexico.svg/45px-Flag_of_New_Mexico.svg.png"
  }, {
    "name": "New York",
    "flag": "1/1a/Flag_of_New_York.svg/46px-Flag_of_New_York.svg.png"
  }, {
    "name": "North Carolina",
    "flag": "b/bb/Flag_of_North_Carolina.svg/45px-Flag_of_North_Carolina.svg.png"
  }, {
    "name": "North Dakota",
    "flag": "e/ee/Flag_of_North_Dakota.svg/38px-Flag_of_North_Dakota.svg.png"
  }, {
    "name": "Ohio",
    "flag": "4/4c/Flag_of_Ohio.svg/46px-Flag_of_Ohio.svg.png"
  }, {
    "name": "Oklahoma",
    "flag": "6/6e/Flag_of_Oklahoma.svg/45px-Flag_of_Oklahoma.svg.png"
  }, {
    "name": "Oregon",
    "flag": "b/b9/Flag_of_Oregon.svg/46px-Flag_of_Oregon.svg.png"
  }, {
    "name": "Pennsylvania",
    "flag": "f/f7/Flag_of_Pennsylvania.svg/45px-Flag_of_Pennsylvania.svg.png"
  }, {
    "name": "Rhode Island",
    "flag": "f/f3/Flag_of_Rhode_Island.svg/32px-Flag_of_Rhode_Island.svg.png"
  }, {
    "name": "South Carolina",
    "flag": "6/69/Flag_of_South_Carolina.svg/45px-Flag_of_South_Carolina.svg.png"
  }, {
    "name": "South Dakota",
    "flag": "1/1a/Flag_of_South_Dakota.svg/46px-Flag_of_South_Dakota.svg.png"
  }, {
    "name": "Tennessee",
    "flag": "9/9e/Flag_of_Tennessee.svg/46px-Flag_of_Tennessee.svg.png"
  }, {
    "name": "Texas",
    "flag": "f/f7/Flag_of_Texas.svg/45px-Flag_of_Texas.svg.png"
  }, {
    "name": "Utah",
    "flag": "f/f6/Flag_of_Utah.svg/45px-Flag_of_Utah.svg.png"
  }, {
    "name": "Vermont",
    "flag": "4/49/Flag_of_Vermont.svg/46px-Flag_of_Vermont.svg.png"
  }, {
    "name": "Virginia",
    "flag": "4/47/Flag_of_Virginia.svg/44px-Flag_of_Virginia.svg.png"
  }, {
    "name": "Washington",
    "flag": "5/54/Flag_of_Washington.svg/46px-Flag_of_Washington.svg.png"
  }, {
    "name": "West Virginia",
    "flag": "2/22/Flag_of_West_Virginia.svg/46px-Flag_of_West_Virginia.svg.png"
  }, {
    "name": "Wisconsin",
    "flag": "2/22/Flag_of_Wisconsin.svg/45px-Flag_of_Wisconsin.svg.png"
  }, {
    "name": "Wyoming",
    "flag": "b/bc/Flag_of_Wyoming.svg/43px-Flag_of_Wyoming.svg.png"
  }];
});
      

        
        
        
      

    
<!doctype html>
<html ng-app="plunker">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.js"></script>
  <script src="//pineconellc.github.io/angular-foundation/mm-foundation-tpls-0.5.1.js"></script>
  <script src="example.js"></script>
  <link href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.2.0/css/foundation.css" rel="stylesheet">
</head>

<body>

  <div class="row">
    <div class="small-12.columns">
      <script type="text/ng-template" id="customTemplate.html">
        <a>
          <img ng-src="http://upload.wikimedia.org/wikipedia/commons/thumb/{{match.model.flag}}" width="16">
          <span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>
        </a>
      </script>
      <div class='container-fluid' ng-controller="TypeaheadCtrl">

        <h4>Static arrays</h4>
        <pre>Model: {{selected | json}}</pre>
        <input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">

        <h4>Asynchronous results</h4>
        <pre>Model: {{asyncSelected | json}}</pre>
        <input type="text" ng-model="asyncSelected" placeholder="Locations loaded via $http" typeahead="address for address in getLocation($viewValue) | filter:$viewValue" typeahead-loading="loadingLocations" class="form-control">
        <i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>

        <h4>Custom templates for results</h4>
        <pre>Model: {{customSelected | json}}</pre>
        <input type="text" ng-model="customSelected" placeholder="Custom template" typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" typeahead-template-url="customTemplate.html" class="form-control">
      </div>
    </div>
  </div>
Run codeHide result


+1


source


The code in the plunker was wrong. The module foundationDemoApp

was declared as angular.module('foundationDemoApp')

instead of angular.module('foundationDemoApp', [])

. The html was pointing to a named module plunker

as opposed to a module foundationDemoApp

. After these errors are fixed, the script is loaded.



http://plnkr.co/edit/8cZEo6pnyjqjmqcUMqmX?p=preview

+1


source






More articles:


All Articles