AngularJS提前输入示例始终无法正常工作

Question

AngularJS提前输入示例始终无法正常工作

Jam*_*jin 4 type-ahead angularjs bootstrap-typeahead angularjs-directive angular-ui-bootstrap

我现在正在尝试在angularjs typeahead上使用一种情况，但它始终无法正常工作，我是否忘记导入一些js文件？请帮帮我，谢谢

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

Run Code Online (Sandbox Code Playgroud)

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'];

Run Code Online (Sandbox Code Playgroud)

Answer 1

Dil*_*adi 5

//Define "ui.bootstrap" dependency here

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

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

	];

});

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，5 月前
查看次数：	11843 次
最近记录：	7 年，2 月前