Angularjs: Передача данных из <select> в списки

Question

В угловом режиме, как бы изменить этот выбор на список, сохраняя при этом те же функции и данные?

<select ng-if="main.fbWriteup.data" 
      name="selectGroup" 
      class="form-control" 
      ng-model="main.selectedGroup" 
      ng-options="key as key for (key,group) in main.fbWriteup.data" 
      ng-change="main.selectedMessage=-1"> 
    </select><br/> 

вот мой полный код: http://codepen.io/Zancrash/pen/KVYdqP/

Вы можете добавить группу и группы, добавленные отображаются в раскрывающемся меню. Но я хочу, чтобы все они отображались как элемент списка.

Answer 1

ОК, я думаю, я знаю, что вы ищете.

Я создал новую демонстрационную скрипту, потому что ваш код трудно читать.

Просто используйте ng-repeat, чтобы перебрать свой список групп и добавить ng-click для выбора группы.

Пожалуйста, взгляните на демо внизу или в этом fiddle.

angular.module('demoApp', []) 
 
\t .controller('mainController', MainController); 
 
    
 
function MainController($scope) { 
 
\t var vm = this, 
 
    \t \t defaultEntries = [{ 
 
    \t \t \t id: 0, 
 
    \t \t \t name: 'group1' 
 
    \t \t },{ 
 
    \t \t \t id: 1, 
 
    \t \t \t name: 'group2' 
 
    }]; 
 
\t angular.extend(vm, \t { 
 
    \t groups: defaultEntries, 
 
    selectedGroup: defaultEntries[0], 
 
    addGroup: function() { 
 
     var newGroupName = prompt('enter group name'), 
 
     \t \t newItem = {id: vm.groups.length+1, name: newGroupName} 
 
     vm.groups.push(newItem); 
 
     vm.selectedGroup = newItem; // select new item 
 
    \t } 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="demoApp" ng-controller="mainController as ctrl"> 
 
<button ng-click="ctrl.addGroup()"> 
 
Add Group 
 
</button> 
 

 
<select ng-model="ctrl.selectedGroup" ng-options="group as group.name for group in ctrl.groups"></select> 
 
group selected: {{ctrl.selectedGroup}} 
 

 
<h1> 
 
Group list 
 
</h1> 
 
<ul> 
 
    <li ng-repeat="group in ctrl.groups"><a href="#" ng-click="ctrl.selectedGroup = group">{{group.name}}</a></li> 
 
</ul> 
 
</div>