Question

我正在尝试使用angularJS从下拉列表（存储在按钮中）中选择图像。我没有使用选项，因为这些只能与文本一起使用。我发现的所有解决方案似乎都是针对选择，而不是针对按钮。有人知道该如何解决吗？

<div id="dropdown" class="dropdown" ng-model="payment.image">
    <button id="dropdown-btn" class="btn btn-default form-control ui-select-toggle" ng-click="toggle = !toggle" aria-labelledby="dropdown-btn">
        <img src="{{icons[0]}}">
        <span class="glyphicon glyphicon-chevron-down"></span>
        <div class="dropdown-content" ng-repeat="icon in icons" ng-if="$index>0">
            <a href="#" ng-class="{'show':toggle}" ng-init="{'show'=false}">
                <img ng-src="{{ icon }}" ng-click="select(icon)">
            </a>
        </div> . 
    </button>
</div>

function ($translate, $scope, PaymentMethodService) {
    'use strict';
    $scope.icons = [];

    $scope.dropDown = function () {
        for (var i = 0; i < 9; i++) {
            $scope.icons.push('static/images/BBICON_' + [i + 1] + '.png');
        }
        console.log($scope.icons);
    };

    $scope.dropDown;

Answer 1

我在这里做了一些更改。已将ng-init="{'show': false}"从HTML中删除，并将$scope.toggle = false添加到了控制器中。

angular.module("app",[]).controller("MainController", function($scope) {
    $scope.toggle = false;
    $scope.icons = [];

    $scope.dropDown = function () {
        for (var i = 0; i < 9; i++) {
            $scope.icons.push('static/images/BBICON_' + [i + 1] + '.png');
        }
       // console.log($scope.icons);
    };

    $scope.dropDown();
 });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MainController">
<div id="dropdown" class="dropdown" ng-model="payment.image">
    <button id="dropdown-btn" class="btn btn-default form-control ui-select-toggle" ng-click="toggle = !toggle" aria-labelledby="dropdown-btn">
        <img src="{{icons[0]}}">
        <span class="glyphicon glyphicon-chevron-down"></span>
        <div class="dropdown-content" ng-repeat="icon in icons" ng-if="$index>0">
            <a href="#" ng-class="{'show':toggle}">
                <img ng-src="{{ icon }}" ng-click="select(icon)">
            </a>
        </div> . 
    </button>
</div>

</div>

angularjs-从下拉列表中选择图像（按钮）

1 个答案: