AngularJS <datalist> 给出奇怪的选项

Question

我正在尝试转换它：

<td class="col-md-2">
<select style="max-width:120px" 
        ng-model="row.gaProfileId" 
        ng-repeat="profile.id as weGaAdminCtrl.showProfile(profile) for profile in weGaAdminCtrl.profiles"
        ng-change="weGaAdminCtrl.assignBrandToProfile(row)">
        </select>
</td>

变成这样的东西：

<td class="col-md-2">
      <input type="text" list="datalist">
      <datalist id="datalist">
        <select style="max-width:120px;" 
                ng-model='row.gaProfileId' 
                ng-options='profile.id as weGaAdminCtrl.showProfile(profile) for profile in weGaAdminCtrl.profiles'
                ng-change="weGaAdminCtrl.assignBrandToProfile(row)">
        </select>
      </datalist>
</td>

我得到的是： Datalist preview

现在我不明白它是如何给我的 "string:###"。有谁知道我该如何改变它？

Answer 1

html :

<div ng-controller="MyCtrl">

   <input list="trees" name ="trees">
<datalist id="trees">
//<select> is optional 
  <option ng-repeat="tree in trees" value="{{tree.name}}">{{tree.name}}</option>
//</select>
</datalist>


</div>

js :

var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.trees = [
  {'name':'oak'},
  {'name':'ash'},
  {'name':'fir'}
];
}

从 datalist 中触发 ng-change in Angular 1.x read and https://github.com/angular-ui/bootstrap/issues/3036

并且由于样式 datalist 和 select 请参阅 Is it possible to style the drop-down suggestions when using HTML5 <datalist>?

AngularJS <datalist> 给出奇怪的选项

AngularJS <datalist> giving weird options

javascript

angularjs

html-datalist