3

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

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

2 回答 2

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>

于 2014-12-21T23:15:16.927 回答
1

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

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

于 2014-12-21T23:15:49.370 回答