Angular UI-Select 标记简单字符串标签（启用自定义标签标签和排序）答案

【问题标题】：Angular UI-Select tagging Simple String Tags (With Custom Tag Label & Sort Enabled)Angular UI-Select 标记简单字符串标签（启用自定义标签标签和排序）
【发布时间】：2017-12-22 06:32:57
【问题描述】：

我正在构建一个食谱网站，它在添加标签时使用 angular ui-select，如果它还没有在 db 上，它将被添加到 db。

我下载了 AngularJS 和 Angular UI-Select 并将其添加到我的 BundleConfig.cs 中，并在我的 Site.js 中添加了 demo.js 代码 here

BundleConfig.cs

bundles.Add(new ScriptBundle("~/bundles/angular").Include(
"~/Scripts/angular.min.js"));

bundles.Add(new ScriptBundle("~/bundles/select").Include(
"~/Scripts/select.min.js"));

bundles.Add(new ScriptBundle("~/bundles/site").Include(
"~/Scripts/Site.js"));

然后我在我的html中添加了这个

<ui-select multiple tagging tagging-label="(custom 'new' label)" ng-model="ctrl.multipleDemo.colors" theme="bootstrap" sortable="true" ng-disabled="ctrl.disabled" style="width: 300px;" title="Choose a color">
<ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
<ui-select-choices repeat="color in ctrl.availableColors | filter:$select.search">
    {{color}}
</ui-select-choices>
</ui-select>
<p>Selected: {{ctrl.multipleDemo.colors}}</p>

然后在我的脚本部分下面

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/angular")
@Scripts.Render("~/bundles/select")
@Scripts.Render("~/bundles/site")
}

但是当我运行它时，我得到的输出是这个 Output of demo

{{$item}} {{color}}
Selected: {{ctrl.multipleDemo.colors}}

我也尝试添加所有的 css 和 js 链接，但没有成功。

我不知道我错过了什么，有人可以帮我吗？

【问题讨论】：

看来，您的代码在asp.net MVC 中，也为此添加标签。乍一看，您的捆绑似乎有些问题。
@Mittal 我已经有一个 asp.net-mvc 标签。我在我的共享布局中添加了 ng-app 和 ng-controller，它起作用了。

标签： html angularjs asp.net-mvc angular-ui-select

【解决方案1】：

我尝试将 ng-app 和 ng-controller 放在 _Layout.cshtml 中，而不是在我的 html 中包含 ui-select 的 div 中

<html ng-app="app">
<head>
</head>
<body ng-controller="mainCtrl">

然后我在js代码中添加了$http

var app = angular.module('app', [])
    app.controller('mainCtrl', function ($scope, $window, $http) {

【讨论】：