Angular typeahead代码不适用于他们自己的角度基础网页示例代码

时间：2014-12-21 22:43:54

标签： javascript angularjs angular-foundation

我使用角度基础作为他们的网站

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

当我点击他们的plunker然后当我在文本框中键入内容时它不起作用

这是他们的掠夺者

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

我希望看到该类型代码的最小工作示例。

任何人都可以看看问题

您可以提前搜索类型，然后点击其网站上的“在Plunker中编辑”

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

他们的代码似乎都很好。即使这个最小代码也无效

<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">

2 个答案:

答案 0 :(得分：1)

请参阅下面的工作演示

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

代替

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>

答案 1 :(得分：1)

plunker中的代码不是很好。 foundationDemoApp模块声明为angular.module('foundationDemoApp')而不是angular.module('foundationDemoApp', []) html指向名为plunker的模块，而不是foundationDemoApp模块。修复这些错误后，脚本实际加载。

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

相关问题
最新问题