如何发展AngularJS和MVC4自动完成文本框。我是新来AngularJS [英] How to develop autocomplete textbox in AngularJS and MVC4. I'm new to AngularJS

问题描述

我的情况：
我的MVC控制器返回的JSON数据是字符串数组

My Scenario: My MVC controller is returning JSON data which is array of string

我尝试了所有可能的解决方案，如Twitter的引导typeahed的角度，但毫无效果。
我阅读文档，但它也不力为我工作。
任何人都可以解释如何实现一步一步自动完成？
我有使用jQuery，但我不想使用jQuery的角度完全不认识的jQuery的DOM的更新实现的。

I tried all the possible solutions like twitter bootstrap typeahed for angular but nothing worked. I read documentation but it also dint work for me. Can anybody explain how to implement autocomplete step by step? I have implemented it using jQuery but I dont want to use jQuery as Angular doesnt know the DOM updates by jQuery.

推荐答案

最后，我能够用引导预输入开发角度自动填充文本框。

Finally I was able to develop angular autocomplete text box using bootstrap typeahead.

要发展与您的服务返回的JSON数据的角度引导预输入下面是步骤：
您需要注册：

的jquery.js

bootstrap.js

angular.js

To develop angular bootstrap typeahead with your service returning JSON data below are the steps: You need to register:
jquery.js
bootstrap.js
angular.js

和使用引导你需要添加角度引导依赖JavaScript文件：

UI的引导，第三方物流企业，0.14.3.js

And to use bootstrap you need to add angular bootstrap dependency javascript file:
ui-bootstrap-tpls-0.14.3.js

在以下文件中捆绑软件的配置寄存器：

In your bundle config register below files:

        bundles.Add(new ScriptBundle("~/bundles/cdnjquery").Include("~/Scripts/jquery2.1.4.js"));
        bundles.Add(new ScriptBundle("~/bundles/cdnbootstrapjs").Include("~/Scripts/bootstrap.min.js"));
        bundles.Add(new ScriptBundle("~/bundles/cdnangularjs").Include("~/Scripts/angular1.4.5.js"));
        bundles.Add(new ScriptBundle("~/bundles/cdnangularresourcejs").Include("~/Scripts/angular-resource.js"));
        bundles.Add(new ScriptBundle("~/bundles/appjs").Include("~/Scripts/app.js"));

        bundles.Add(new ScriptBundle("~/bundles/angularbootstrapjs").Include("~/Scripts/ui-bootstrap-tpls-0.14.3.js"));
        bundles.Add(new StyleBundle("~/Content/bootstrapcss").Include("~/Content/bootstrap.css"));

在您的CSHTML文件中添加以下code：

In your cshtml file add below code:

渲染你的共享或各自.cshml文件脚本和CSS：

Render scripts and css in your shared or respective .cshml file:

@Styles.Render("~/Content/bootstrapcss")
@Scripts.Render("~/bundles/cdnjquery")
@Scripts.Render("~/bundles/cdnbootstrapjs")
@Scripts.Render("~/bundles/cdnangularjs")
@Scripts.Render("~/bundles/angularbootstrapjs")
@Scripts.Render("~/bundles/appjs")

下面写code在各自CSHTML文件：

Write below code in your respective cshtml file:

<h4>Get Quote</h4>
<pre>Model: {{selected | json}}</pre>
<input type="text" ng-model="selected" uib-typeahead="stock.NAME_OF_COMPANY for stock in stocks | filter:$viewValue | limitTo:8" class="form-control">

现在写低于code在app.js文件：

Now write below code in your app.js file:

var StockMarketApp = angular.module("StockMarketApp", ["ngResource", "ui.bootstrap"]);

StockMarketApp.controller('StockController', function ($scope, $http) {
  $scope.stocks = undefined;

   $scope.fnGetQuoteDataForAutoComplete = function () {
    //$scope.getQuote = 'dhfl';
    $http.get("/EquityList/GetStockNamesForAutoComplete")
            .success(function (data, status, headers, config) {
                $scope.stocks = angular.fromJson(data)
            })
        .error(function (data, status, headers, config) {
        });
  };
});

我的JSON数据包含：

data.SYMBOL

data.NAME_OF_COMPANY

My JSON data contains:
data.SYMBOL
data.NAME_OF_COMPANY

我要显示data.NAME_OF_COMPANY，所以如果你在CHTML code检，我已经写：

UIB-预输入=股票stock.NAME_OF_COMPANY股票。

I want to display data.NAME_OF_COMPANY, so if you check in chtml code, I have written:
uib-typeahead="stock.NAME_OF_COMPANY for stock in stocks.

在这种方式，您可以创建一个使用angularjs和自举一个预输入。

In this way you can create a typeahead using angularjs and bootstrap.

希望这有助于人谁是在此我一样迷迷糊糊。

Hope this helps someone who is stumbled upon this like me.

这篇关于如何发展AngularJS和MVC4自动完成文本框。我是新来AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！