угловой выбор с настраиваемым шаблоном опций

У меня есть один выбор, который отображает список объектов и кнопку, чтобы отобразить выбранные объекты. Оно работает.угловой выбор с настраиваемым шаблоном опций

Проблема заключается в том, что мне нужно, чтобы показать больше, чем имя объекта в поле выбора, я попытался это, но он возвращает строку вместо объекта JSON:

<select ng-model="selected"> 
    <option ng-repeat="item in items" value="{{item}}"> 
      {{item.name}} <span>Some nice data</span> 
    </option> 
</select>

Как я могу получить его? мне нужно создать для него директиву?

Вот мой код, который работает без дополнительных данных в поле выбора

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

 

 
app.controller('Test', function($scope) { 
 

 
    $scope.selected = null; 
 
    $scope.items = [{ 
 
    name: 'a', 
 
    value: 1, 
 
    something: "xyz" 
 
    }, { 
 
    name: 'b', 
 
    value: 2, 
 
    something: "xyz" 
 
    }, { 
 
    name: 'c', 
 
    value: 3, 
 
    something: "xyz" 
 
    }] 
 

 

 
    $scope.show = function() { 
 
    alert("selectec " + $scope.selected.name + ' with value ' + $scope.selected.value); 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<html ng-app="app"> 
 

 
<body> 
 
    <div ng-controller="Test"> 
 
    <select data-ng-options="i.name for i in items" ng-model="selected"> 
 
    </select> 
 
    <button ng-click="show()">press</button> 
 
    </div> 
 
</body> 
 

 
</html>

источник

2014-11-26 Andres

Это не действует, чтобы положить HTML внутри опциона тега для выбора. Вам просто нужно создать свой собственный, используя теги DIV или все, что вам подходит. В другой заметке вы можете переосмыслить свой пользовательский интерфейс, поскольку целью drowdown не является просмотр данных.

источник

2014-11-26 19:58:22 Scott

Вы не можете выводить HTML-код из директивы AngularJS ngOptions. Но вы можете настроить содержимое вариант с использованием функции для обозначения элементов, например, так (обратите внимание, что HTML экранируются):

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

 

 
app.controller('Test', function($scope) { 
 

 
    $scope.selected = null; 
 
    $scope.items = [{ 
 
    name: 'a', 
 
    value: 1, 
 
    something: "xyz" 
 
    }, { 
 
    name: 'b', 
 
    value: 2, 
 
    something: "xyz" 
 
    }, { 
 
    name: 'c', 
 
    value: 3, 
 
    something: "xyz" 
 
    }] 
 

 

 
    $scope.show = function() { 
 
    alert("selectec " + $scope.selected.name + ' with value ' + $scope.selected.value); 
 
    } 
 

 
    $scope.format = function(i) { 
 
    return i.name + '<span>Some nice data</span>'; 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<html ng-app="app"> 
 

 
<body> 
 
    <div ng-controller="Test"> 
 
    <select data-ng-options="i as format(i) for i in items" ng-model="selected"> 
 
    </select> 
 
    <button ng-click="show()">press</button> 
 
    </div> 
 
</body> 
 

 
</html>

источник

2014-11-26 19:59:48

Это хорошо, но это показывает ** ** тег – Andres

можно добавить ** ng-bind-html ** или что-то с ** $ sce **? – Andres

Нет, директива передает содержимое 'option', используя функцию' text' jQuery, и нет возможности использовать функцию 'html'. Проверьте источник: https://github.com/angular/angular.js/blob/master/src/ng/directive/select.js –

угловой выбор с настраиваемым шаблоном опций

ответ

Смежные вопросы