UI 선택에서 수동으로 입력한 텍스트 허용
ui-select에서 select 상자를 사용하고 있습니다.모두 정상적으로 동작하지만 수동으로 입력된 텍스트를 허용하고 사용자가 목록에서 사용할 수 있는 값을 제한하고 싶지 않습니다.텍스트를 입력하면 목록이 올바르게 필터링됩니다.그러나 요소를 클릭하지 않고 다음 필드로 이동하면 텍스트가 삭제됩니다.
좋은 생각 있어요?
고마워요, 알렉스
코드가 올바르지 않은 것 같아서 보여주고 싶지 않았는데, 다음과 같이 요청되었습니다.
<ui-select ng-model="formData[field.id].selected" theme="bootstrap">
<ui-select-match placeholder="{{ lists[field.id].placeholder }}">{{$select.selected.text}}</ui-select-match>
<ui-select-choices repeat="item in lists[field.id].list | filter: $select.search">
<div ng-bind-html="item.text | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
데이터는 다음 위치에 저장됩니다.formData[field.id].selected
.field.id
는 표시할 현재 필드의 번호입니다(폼을 동적으로 생성합니다).하나의 int 값이 저장되어 있다고 가정합니다.
2015.08.04.My 솔루션 편집:C# 콤보박스에 해당하는 것은 없는 것 같습니다.그래서 저는 두 개의 다른 필드를 사용했습니다.제가 원하던 것은 아니지만, 지금은 효과가 있습니다.
<ui-select ng-model="formData[field.id].selected" theme="bootstrap">
<ui-select-match placeholder="{{ lists[field.id].placeholder }}">{{$select.selected.text}}</ui-select-match>
<ui-select-choices repeat="item in lists[field.id].list | filter: $select.search">
<div ng-bind-html="item.text | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
<?php echo __('Create a new element if value is not in list'); ?>
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" ng-model="disabled[field.id]">
</span>
<input type="text" value="" ng-disabled="!disabled[field.id]" class="form-control" ng-model="formData[field.id].newValue" />
</div>
해결책은 다음과 같습니다.
HTML -
<ui-select ng-model="superhero.selected">
<ui-select-match placeholder="Select or search a superhero ...">{{$select.selected}}</ui-select-match>
<ui-select-choices repeat="hero in getSuperheroes($select.search) | filter: $select.search">
<div ng-bind="hero"></div>
</ui-select-choices>
</ui-select>
컨트롤러 -
$scope.getSuperheroes = function(search) {
var newSupes = $scope.superheroes.slice();
if (search && newSupes.indexOf(search) === -1) {
newSupes.unshift(search);
}
return newSupes;
}
CodePen 솔루션은 다음과 같습니다.
사용자가 새로운 엔트리를 작성할 수 있는 방법을 찾은 것 같습니다.다음과 같이 $select를 매개 변수로 사용하는 함수를 전달하려면 "on-select" 속성을 사용합니다.
<ui-select ng-model="person.selected"
theme="select2"
on-select="peopleSel($select)"
tagging
reset-search-input="false"
>
<ui-select-match placeholder="Enter a name...">{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="sel in people | filter: {name: $select.search}">
<div ng-bind-html="sel.name | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
그런 다음 clickTriggeredSelect 변수가 false일 때 새 엔트리를 추가하는 함수를 만듭니다.
$scope.peopleSel= function(sel) {
if ( sel.search && ! sel.clickTriggeredSelect ) {
if ( ! sel.selected || sel.selected.name != sel.search ) {
//Search for an existing entry for the given name
var newOne= personSearch( sel.search );
if ( newOne === null ) {
//Create a new entry since one does not exist
newOne= { name: sel.search, email: 'none', country: 'unknown' };
$scope.people.push( newOne );
}
//Make the found or created entry the selected one
sel.selected= newOne;
}
}
sel.search= ''; //optional clearing of search pattern
};
여기서 personSearch 정의는 제공되지 않습니다.또한 clickTriggeredSelect를 테스트하는 이 방법을 사용하여 빈 엔트리가 기본 설정일 경우 사용자가 필드를 선택 해제할 수 있습니다.
PVC
설명서에 기재되어 있는 바와 같이 태그 속성을 사용할 수 있습니다.https://github.com/angular-ui/ui-select/wiki/ui-select
<ui-select multiple tagging tagging-label="(custom 'new' label)" ng-model="multipleDemo.colors">
...
</ui-select>
allow-free-text 속성을 통해 이 기능을 허용하기 위해 ui-select 프로젝트를 연결했습니다.
<ui-select allow-free-text="true" ng-model="ctrl.freeTextDemo.color2" theme="bootstrap" style="width: 800px;" title="Choose a color">
<ui-select-match placeholder="Select color...">{{$select.selected}}</ui-select-match>
<ui-select-choices repeat="color in ctrl.availableColors | filter: $select.search">
<div ng-bind-html="color | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
여기 있습니다.
angular-ui 팀에서 풀 요청을 수락할 때까지 내 패치가 포함된 UI 선택 빌드를 내 보고서로 가져올 수 있습니다.
사용하고 있다keyup
[ to add new ]옵션은 입력된 텍스트를 나타냅니다.이 접근법에서는 사용자가 를 누른 경우enter
지금까지 입력한 내용을 선택할 수 있습니다(기본 활성 항목은 첫 번째 항목입니다).
데이터 목록에 일반 텍스트 또는 개체(속성)가 포함되어 있는 경우 모두 지원됩니다.value-prop
필수입니다).
지시:
commonApp.directive("uiSelectFreeText", function () {
return {
restrict: "A",
require: "uiSelect",
link: function (scope, element, attrs, $select) {
var searchInput = element.querySelectorAll("input.ui-select-search");
if (searchInput.length !== 1) {
console.log("Error! Input not found.");
return;
}
searchInput.on("keyup", function () {
var valueProp = attrs["valueProp"];
var addNewObjOption = function () {
// add new item represent free text option
var newOption = { isFreeText: true };
newOption[valueProp] = $select.search;
$select.items.unshift(newOption);
};
if ($select.items.length > 0) {
var firstItem = $select.items[0];
if (valueProp) {
// items is list of Object
if (firstItem.isFreeText) {
firstItem[valueProp] = $select.search;
} else {
addNewObjOption();
}
} else {
// items is list of string
if (firstItem === $select.search) {
return;
} else {
$select.items.push($select.search);
}
}
} else {
if (valueProp) {
addNewObjOption();
} else {
// items is list of string
$select.items.push($select.search);
}
}
});
}
};
});
HTML:
<ui-select class="ui-select-control"
ui-select-free-text value-prop="Label"
ng-model="keyword">
</ui-select>
언급URL : https://stackoverflow.com/questions/29489821/allow-manually-entered-text-in-ui-select
'programing' 카테고리의 다른 글
json 데이터를 html 테이블로 변환 (0) | 2023.03.18 |
---|---|
쿼리 문자열에서 매개 변수 값을 가져오려면 어떻게 해야 합니까? (0) | 2023.03.18 |
Python 직렬화 가능 개체 json (0) | 2023.03.18 |
mock inner axios.create() (0) | 2023.03.18 |
React 컴포넌트가 재렌더되는 이유를 추적 (0) | 2023.03.18 |