使用引導程序/ angularjs的可編輯組合框

我沒有得到任何解決方案，有組合框作爲選擇以及輸入。這意味着如果用戶選擇不存在於每個人口填充清單中，那麼使用應該能夠輸入他的選擇值。用戶選擇（選擇或輸入）應該在angularjs中設置和檢索爲ng-model。使用引導程序/ angularjs的可編輯組合框

感謝

來源

2014-02-07 sudhirk

我想你想一個指令。創建一個提琴手，你可以爲你添加一個指令 – V31

的ui-select2 library讓您使用select2通過一個指令。這提供了一些很棒的UI元素，可以滿足您的要求。

一般來說，我還建議Angular Modules網站找到各種有用的角庫。

來源

2014-02-08 18:29:22

這個問題很明顯，能夠輸入一個不在選擇列表中的值。我看不出Select2如何幫助滿足這一要求。 –

作爲示例，請訪問我提供的select2鏈接並搜索/向下滾動到「標記支持」。在頁面上：「請注意，當啓用標記時，用戶可以從預先存在的標記中進行選擇，或者通過選擇用戶迄今在搜索框中鍵入的第一個選項來創建新標記。」這就是我使用它的方式，它可以讓你輸入新的值。 –

謝謝，馬特。坦率地說，你引用的頁面的措辭是如此毀壞，我誤解了它。感謝您的澄清！ –

ui-select看起來不像我們都習慣的正確選擇。所以這是我結束了幫助Twitter的引導3做：從愛爾蘭

http://jsfiddle.net/ruslans_uralovs/2brhd/1/

<div ng-app > 
    <div class="row" ng-controller="ExampleController"> 
     <div class="col-xs-8 col-xs-offset-2"> 

      <form role="form"> 
       <div class="input-group"> 
        <input type="text" class="form-control" ng-model="myColor.name"> 
        <div class="input-group-btn"> 
         <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> 
         <ul id="color-dropdown-menu" class="dropdown-menu dropdown-menu-right" role="menu"> 
          <li ng-repeat="color in colors" class="input-lg"><a href="#" ng-click="changeColor(color)">{{color.name}}</a></li> 
         </ul> 
        </div> 
       </div> 
     </div> 
    </div> 
</div>

問候！

來源

2014-07-27 00:15:30

我喜歡這個工具比UI選擇更好。這允許真正的類型在ui-select只能查找的地方。 – Leng

像這樣比UI選擇更好。優雅和容易。 –

這是修改原始數據，所以我調整了一下http://jsfiddle.net/ueuo4yho/ – liteflier

我也在尋找同樣的東西，並沒有找到一個好的解決方案，所以我最終創建了angular-combo-box directive，它可以讓你做你正在尋找的東西。這是一個例子。

angular.module('ngComboBoxExample', ['ngComboBox']) 
 
    .controller('myController', function($scope) { 
 
    $scope.options = [ 
 
     'Blue', 
 
     'Red', 
 
     'Pink', 
 
     'Purple', 
 
     'Green' 
 
    ]; 
 
    $scope.color = ''; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="http://bradleytrager.github.io/angular-combo-box/bower_components/angular-combo-box/dist/angular-combo-box.min.js"></script> 
 

 
<div ng-app="ngComboBoxExample"> 
 
    <div ng-controller="myController"> 
 
    <combo-box options="options" combo-model="color" label="--Select a Color--" other-label="A color not on the list..."> 
 
    </combo-box> 
 
    <div>Selected Color: <span ng-bind="color"></span> 
 
    </div> 
 
    </div> 
 
</div>

希望它能幫助！

來源

2015-03-23 18:32:39

這很好，但它缺少查找功能。你需要兩個獨立的領域。 – AlexWerz

使用HTML5，你可以這樣做：

<input type=text list=browsers > 
    <datalist id=browsers > 
     <option> Google 
     <option> IE9 
    </datalist>

得到它從這裏： http://www.scriptol.com/html5/combobox.php

來源

2015-12-02 09:35:36

請注意，Safari不支持以下操作：[https://caniuse.com/#feat=datalist](https://caniuse.com/#feat=datalist） – RichardW

使用引導程序/ angularjs的可編輯組合框

回答

相關問題