角度预选代码不适用于自己的角度基础网页示例代码

Question

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

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

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

Answer 2

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

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