Заполнитель не работает в angularjs select2

Question

Вот код, который я пробовал. Я попытался добавить placeholder с кодом angularjs и html, но он не работает в обоих случаях. Пожалуйста, помогите мне или предложить мне, как поступить в этом случае

<select ui-select2="select2Options" 
style="width:100%" 
ng-model="SelectedProcessandIngredients" 
data-placeholder="Select or Add Process/Ingredient" 
ng-options="c.name group by c.status for c in colors" 
ng-change="selectedinnerLoop()" >   
     </select> 

Угловая JS код:

$scope.select2Options = { 
     placeholder : "Select or Add Process/Ingredient", 
     formatResult : processList, 
     formatSelection : processList, 
     escapeMarkup : function (m) { 
     return m; 
     } 

    }; 

Answer 1

Добавьте пустой тег компонента в свой тег select, и будет отображаться местозаполнитель. Кроме того, используйте ng-repeat вместо ng-options. Select2 несовместим с ng-опциями.

<select ui-select2 ng-model="select2" data-placeholder="Pick a number"> 
    <!-- empty option gets placeholder working --> 
    <option value=""></option> 
    <!-- ng-repeat to populate dynamic options --> 
    <option ng-repeat="number in range" value="{{number.value}}">{{number.text}}</option> 
</select> 

Answer 2

Правильный способ сделать этот вид поведения, на мой взгляд, чтобы написать директиву в который вы создаете HTNL с пользовательскими атрибутами HTML.

Here - хорошая статья о том, как написать директиву.