Question

我做过一些研究，但我找不到任何教程或示例。所以我想我会把它放在那里让某人回答。

我正在尝试以角度创建按钮以显示在html中。我没有太多代码，但这里有我所拥有的代码：

＆＃13;

angular.module('starter.controllers', ['ionic'])

.controller('HomeCtrl', function($ionicPopup, $scope) {
  }

＆＃13;

<ion-content ng-controller="HomeCtrl">
			<div id="createdBtns" style="margin: 20px">
				<button class="button button-block">Groups</button>
			</div>
			<button id="staticBtn" class="button button-float" ng-click="addContact()">
				<i class="icon ion-plus"></i>
			</button>
		</ion-content>

＆＃13;

那个按钮不会在第一个div里面。它只是我想要的一个例子，但是以角度动态创建我需要在HomeCtrl中创建按钮。任何人都可以帮我解决这个问题吗？

我想做什么：

我会问用户他们的名字。一旦我得到它，我将在屏幕上创建一个按钮，上面有他们的名字。像这样：

＆＃13;

.controller('HomeCtrl', function($ionicPopup, $scope) {
	$scope.addContact = function() {
		$ionicPopup.confirm({
			title: 'Import?',
			template: 'Would you like to import a contact from your current contacts?',
			cancelText: 'No',
		    okText: 'Yes'
		}).then(function(res) {
			if (res) {
				navigator.contacts.pickContact(function(contact) {
					 alert('The following contact has been selected:' + JSON.stringify(contact));
				})

＆＃13;

然后我会创建一个按钮，上面有他们的联系信息。

Answer 1

这听起来像基本的角度功能。您首先必须定义一些$scope数据：

.controller('HomeCtrl', function($ionicPopup, $scope) {
    // or whatever information your contacts have
    $scope.contacts = [];

    // the code that picks a contact
    //..
    navigator.contacts.pickContact(function(contact) {
        $scope.contacts.push(contact);
    })

    $scope.doSomethingWithContact = function(contact) {
        console.log(contact);
    }
}

然后在你的html中写道：

<button class="button button-block"
        ng-repeat="contact in contacts"
        ng-click="doSomethingWithContact(contact)">
    {{ contact.displayName }} (phone: {{ contact.phoneNumbers[0] }})
</button>

Answer 2

在控制器的代码中，您需要创建一组按钮并将其分配给范围。然后在HTML中使用ngRepeat指令迭代该集合并创建所需的按钮。请参阅以下代码以获取示例

https://run.plnkr.co/plunks/jASWuwDMX0ojIj3XLZMX/

从Angular

2 个答案: