Angularjs：将数据从 <select> 传输到列表答案

【问题标题】：Angularjs: Transfer data from <select> to listsAngularjs：将数据从 <select> 传输到列表
【发布时间】：2016-02-18 22:37:23
【问题描述】：

在 Angular 中，如何在保持相同功能和数据的同时将此选择更改为列表？

<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/

您可以添加组，添加的组会显示在下拉菜单中。但我希望所有这些都显示为一个列表项。

【问题讨论】：

你到底想要什么？在提示中输入内容后，是否应将其添加到选择下拉列表中？

标签： javascript html angularjs firebase angularfire

【解决方案1】：

好的，我想我知道你在找什么。

我创建了一个新的演示小提琴，因为您的代码难以阅读。

只需使用ng-repeat 循环您的组列表并添加ng-click 以选择组。

请看下面的演示或fiddle。

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

<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>

【讨论】：