Angular UI-Select标记简单字符串标记(自定义标记标签和排序已启用)

时间:2017-12-22 06:32:58

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

我正在构建一个配方网站,在添加标签时会使用角度ui-select,如果它不在数据库中,则会添加到数据库中。

我下载了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链接,但它不起作用。

我不知道我错过了什么,有人可以帮助我吗?

1 个答案:

答案 0 :(得分:1)

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

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

然后我将$ http添加到js代码

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