UI 선택에서 수동으로 입력한 텍스트 허용

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