我正在使用ng-tags输入,填充行后得到的数据是一个对象数组,每个都有一个'text'字符串字段,如此
[{"text":"egon"},{"text":"peter"},{"text":"raymond"},{"text":"winston"}]
有没有办法将数据存储为字符串数组?喜欢
["egon", "peter", "raymond", "winston"]
Run Code Online (Sandbox Code Playgroud) 我试图在ngTagsInput中使用自动完成,我收到以下错误:
Error: [ngRepeat:dupes] http://errors.angularjs.org/1.2.9/ngRepeat/dupes?p0=item%20in%20suggestionList.items%20track%20by%20track(item)&p1=undefined
at Error (native)
Run Code Online (Sandbox Code Playgroud)
要么
TypeError: Cannot read property 'replace' of undefined
at j (https://localhost:3000/js/plugins/ng-tags-input.min.js:1:5556)
Run Code Online (Sandbox Code Playgroud)
我已经检查了几次,我的查询功能正在返回一个正确的标签数组,而且确实如此.它工作得很漂亮.标签的结构如下所示:
{
name: String,
_id: ObjectId,
__v: Number,
active: Boolean,
display: Boolean,
createDate: Date
}
Run Code Online (Sandbox Code Playgroud)
我的HTML看起来像:
<tags-input
ng-model="tags"
displayProperty="name"
placeholder="Add a tag">
<auto-complete source="loadTags($query)"></auto-complete>
</tags-input>
Run Code Online (Sandbox Code Playgroud)
而我的loadTags函数是:
$scope.loadTags = function(query) {
return $http.get(configService.getApi() + '/tags?conditions=' + urlEncodeObject({name: { $regex: query }}), {
headers: {
'x-auth-token': sessionService.getToken()
}
});
};
Run Code Online (Sandbox Code Playgroud) 谁能告诉我如何使 ng-input-tag(Angular) 在 X 方向可滚动。目前,如果我插入标签,则 div 的高度会增加。我想要的是,如果我继续插入标签,那么它应该沿 X 方向滚动
我尝试过:宽度:自动;高度:34px;溢出-x:自动;溢出-y:隐藏;空白:nowrap;但它没有按预期工作
所以让我知道我错在哪里。
如果自动完成带来相同文本的结果,我正在使用ng-tags输入进行自动完成,例如:当我输入"R","Rob","Rob"时,会填充两个结果.
我点击了一个"Rob",它现在在文本框中,但是当我再次键入"R"时,"Rob"不会出现.如何为列表中的每个项目提供唯一性.
我在使用 ngTagInput 库时遇到奇怪的错误:
错误:无法更改类型属性。
这是该错误的屏幕截图 - Error Screenshot。
HTML 代码 -
<html ng-app="project">
<head>
<link href="/css/ng-tags-input.bootstrap.min.css" rel="stylesheet"/>
<link href="/css/ng-tags-input.min.css" rel="stylesheet" />
<script type="text/javascript" src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js'></script>
<script type="text/javascript" src="/assets/bootstrap-3.2.0-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src='/js/angular.min.js'></script>
<script src="/js/ng-tags-input.min.js"></script>
<script src="/js/app.js"></script>
</head>
<body>
<form ng-controller="MainCtrl" role="form">
<div class="col-md-12 topM10px">
<tags-input ng-model="formInfo.tags" placeholder="Add a keyword"></tags-input>
</div>
<div class="col-md-12 topM10px">
<div ng-click="submitidea()" class="col-md-3 submitbtn">Submit</div>
</div>
</form>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
控制器代码(app.js)-
var app = angular.module('project', ['ngTagsInput']);
app.controller('MainCtrl', function($scope, $http) {
$scope.formInfo = {};
$scope.tags = [
{ text: 'Tag1' }, …Run Code Online (Sandbox Code Playgroud) 我将ngTagsInput指令设置如下:
<tags-input ng-model="controller.myTags"
replace-spaces-with-dashes="false">
<auto-complete source="loadTags($query)"
min-length="0"
load-on-empty="true"
load-on-focus="true">
</auto-complete>
</tags-input>
Run Code Online (Sandbox Code Playgroud)
只要用户选择合适的输入区域,就会显示自动完成列表。但是,只要用户从自动完成列表中选择标签,我希望该列表隐藏。当前,用户选择标签后,列表仍会显示。
如果我删除了空载,则只要输入中的焦点对准,列表就不会显示。
我试图将 mat-chips 放入我的代码中,引发错误
<mat-form-field class="example-chip-list" appearance="fill">
<mat-label>Favorite Fruits</mat-label>
<mat-chip-list #chipList aria-label="Fruit selection">
<mat-chip
*ngFor="let fruit of fruits"
[selectable]="selectable"
[removable]="removable"
(removed)="remove(fruit)">
{{fruit}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
<input
placeholder="New fruit..."
#fruitInput
[formControl]="fruitCtrl"
[matAutocomplete]="auto"
[matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
(matChipInputTokenEnd)="add($event)">
</mat-chip-list>
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
<mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
{{fruit}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
Run Code Online (Sandbox Code Playgroud)
在组件.ts中
selectable = true;
removable = true;
separatorKeysCodes: number[] = [ENTER, COMMA];
fruitCtrl = new FormControl();
filteredFruits: Observable<string[]>;
fruits: string[] = ['Lemon'];
allFruits: string[] = ['Apple', 'Lemon', 'Lime', 'Orange', 'Strawberry']; …Run Code Online (Sandbox Code Playgroud) 我正在使用ng-tags标签 - 输入如下:
<tags-input ng-model="Tags" placeholder="Add" add-from-autocomplete-only="true">
<auto-complete source="loadTags($query)"></auto-complete>
</tags-input>
Run Code Online (Sandbox Code Playgroud)
当标签输入字段失去控制时,我希望任何剩余的文本消失.我想使用allowLeftoverText属性来实现这一点,但是当使用addFromAutocompleteOnly时,文档说它被忽略了.
添加空格分隔的标记时,ng-tags-input将用短划线替换空格.我怎样才能保留空格字符呢?
如果你是从一个来源拉
[{text:'a'},{text:'ab'},{text:'abc'}]
并且用户输入'abcd',你如何阻止用户创建'abcd'标签?