Angularjs typeahead Beispiel funktioniert immer nicht

Ich versuche, einen Fall auf angularjs typeahead jetzt zu verwenden, aber es funktioniert immer nicht, bin ich vergessen, einige js-Dateien zu importieren? Bitte helfen Sie mir, dankeAngularjs typeahead Beispiel funktioniert immer nicht

Html:

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

<head> 
    <link rel="stylesheet" href="bootstrap.min.css"> 
    <script src="jquery.min.js"></script> 
    <script src="bootstrap.min.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script type="text/javascript" src="angular.min.js"></script> 
    <script type="text/javascript" src="ui-bootstrap-tpls-1.3.3.min.js"></script> 
    <script type="text/javascript" src="app.js"></script> 
    <title>Search</title> 
</head> 

<body ng-controller="SearchController as search"> 
     <h4>Static arrays</h4>{{search.states}} 
     <pre>Model: {{selected | json}}</pre> 
     <input type="text" ng-change="onedit()" ng-model="selected" uib-typeahead="state for state in search.states | filter:$viewValue | limitTo:8">

JS:

(function() { 

    var app = angular.module('search', []); 

    app.controller('SearchController', ['$window', '$http', function ($window, $http){      
     var search = this; 
     search.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'];

Quelle

2016-07-12 Jamesjin

sehen Sie Fehler in der Konsole? –

nein, ich habe keine fehler in der konsole gesehen, danke – Jamesjin

Wo ist deine 'ng-app =" suche "? – developer033

i die code.it getestet haben adaequat Sie sehen https://plnkr.co/edit/pThmY2vMX4XmF1YGEnki?p=preview

html haben:

<body ng-controller="SearchController"> 
<div>seleted state: {{selected}}</div> 
     <input type="text" ng-change="onedit()" ng-model="selected" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8"> 
    </body>

javascript:

var app = angular.module('search', ['ui.bootstrap']); 
    app.controller('SearchController', ['$window', '$http','$scope', function ($window, $http,$scope){      
     $scope.selected=""; 
     $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']; 

}]);

Quelle

2016-07-12 05:36:50

wenn das nicht funktioniert.tell mir werde ich die anhängen plumpker –

Danke, ich habe es gerade versucht, es funktioniert immer noch nicht? – Jamesjin

k arbeite daran. Ich werde Ihnen eine komplette Lösung geben, sobald –

Wenn Sie die Nutzungsparameter auf ihrer offiziellen Website erwähnt überprüfen https://angular-ui.github.io/bootstrap Sie eine Abhängigkeit in der Datei enthalten muss, die ist

angular.module('myModule', ['ui.bootstrap']);

Quelle

2016-07-12 05:46:33 Technologeek

Sie sind die Abhängigkeiten fehlen.

nach angular.ui.bootstrap die Abhängigkeiten sind

AngularJS 
Angular-animate 
Angular-touch 
Bootstrap CSS

und Sie vergessen haben, sie auch zu injizieren

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);

hier ist das Beispiel aus der Dokumentation: Typehead

Quelle

2016-07-12 05:46:46 kiro112

wo finde ich Angular-animate und Angular-touch? Danke – Jamesjin

[ngTouch] (https://docs.angularjs.org/api/ngTouch) – kiro112

@Jamesjin ist es besser, wenn Sie das Beispiel öffnen .. es funktioniert voll und alle Dinge, die Sie brauchen, ist schon drin – kiro112

//Define "ui.bootstrap" dependency here 
 

 
var app = angular.module('search', ['ui.bootstrap']); 
 
app.controller('SearchController', function ($scope){      
 
\t $scope.selected=""; 
 

 
    // Set your object 
 
\t $scope.objects = [ 
 
\t \t {id:1, name : 'Dilip', type :{ title : 'a'}}, 
 
\t \t {id:2, name : 'Devendra', type :{ title : 'b'}}, 
 
\t \t {id:3, name : 'Jayesh', type :{ title : 'a'}}, 
 
\t \t {id:4, name : 'Jekin', type :{ title : 'c'}}, 
 
\t \t {id:5, name : 'Gaurang', type :{ title : 'a'}}, 
 
\t \t {id:6, name : 'Bhavin', type :{ title : 'e'}}, 
 

 
\t ]; 
 

 
});

<!DOCTYPE html> 
 
<html ng-app="search"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>dynamic form</title> 
 

 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script> 
 
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap-tpls.js"></script> 
 

 
</head> 
 

 
<body ng-controller="SearchController"> 
 

 
<!-- in uib-typeahead specify that property/attribute name which you want to display in drop down 
 

 
in filter service specify an object with which you want to compare 
 
for example if you want to compare this object by type then 
 

 
filter : { type : $viewValue } 
 

 
--> 
 
<input type="text" ng-model="selected" uib-typeahead="object.name for object in objects | filter: {name:$viewValue} | limitTo:8"> 
 
</body> 
 
</html>

Quelle

2017-02-20 05:09:50

Angularjs typeahead Beispiel funktioniert immer nicht

Antwort

Verwandte Themen