Question

我正在尝试显示四个按钮，这是我的测试数据库中的行数。我成功地从数据库中获取数据，解析了JSON并将其存储到3个数组，idStore，firstStore和lastStore。假设我们在idStore [1,2,3,4] firstName [f1，f2，f3，f4]和lastName [l1，l2，l3，l4]。我想显示四个这样的按钮：

1 f1 l1

2 f2 l2

3 f3 l3

4 f4 l4

现在，我在这里找到了另一个答案，它帮助我在页面上动态地等于idStore.length（因此它在index.html上创建了四个按钮）。问题是我不知道如何使用angular更改按钮文本。我尝试使用$ scope.names显示文本，但它只是一个空白按钮，中间有逗号。我希望按钮文本在创建时成为我的数据。我知道我的信息很好，因为onButtonClicked在控制台日志中成功显示了指定索引的数据。

displaydata.js

myApp.controller('AppCtrl' , function($scope){
        $scope.number = idStore.length;
        $scope.getArray = function(num){
            var array = [];
            for(var i = 0 ; i < num;i++){
                array[i] = i +1;
            }
            return array;
        }
        $scope.names = function(){
            for(var i = 0; i < idStore.length; i++)
            {
                [{first:firstStore[i], last:lastStore[i]}]
            }
        }

        $scope.getButtonClicked = function(buttonNumber){
            console.log(idStore[buttonNumber] + " " + firstStore[buttonNumber] + " " + lastStore[buttonNumber]);
        }
});

的index.html

<body ng-controller="myController">

<div ng-app="app">
    <div ng-controller="AppCtrl">
        <button ng-repeat="n in getArray(number)" id="button-{{$index}}" ng-click="getButtonClicked($index)" >{{names.first}},{{names.last}}</button>
    </div>
</div>

Answer 1

我不得不说，这是一个奇怪的事情。为什么不从JSON返回具有id，firstName和lastName属性的单个对象数组？无论如何，你做这个的方式存在一些问题。您已将names定义为函数，但之后您尝试将其用作具有属性的对象。此外，还不清楚控制器中idStore的位置，因为我没有看到它在任何地方声明或注入。但是你说这个部分正在运行，所以我认为你可以通过将按钮的HTML标记改为这样来简化：

<button ng-repeat="id in idStore" id="button-{{$index}}" ng-click="getButtonClicked($index)">
    {{firstStore[$index]}}, {{lastStore[$index]}}
</button>

除了getButtonClicked功能外，您可以摆脱控制器中的所有内容。

Answer 2

创建JSON数组对象而不是单个数组。

var myApp = angular.module('app',[]);
myApp.controller('AppCtrl' , function($scope){
        $scope.idflStore = [{'id': 1, 'first': 'f1', 'last': 'l1'},{'id': 2, 'first': 'f2', 'last': 'l2'},{'id': 3, 'first': 'f3', 'last': 'l3'},{'id': 4, 'first': 'f4', 'last': 'l4'}];

        $scope.getButtonClicked = function(buttonNumber){
            console.log(idStore[buttonNumber] + " " + firstStore[buttonNumber] + " " + lastStore[buttonNumber]);
        }
});

HTML文件

<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="displaydata.js"></script>
</head>
<body ng-controller="AppCtrl">

<div>
    <div >
        <button ng-repeat="name in idflStore" id="button-{{$index}}" ng-click="getButtonClicked($index)" >
            {{name.id}},{{name.first}},{{name.last}}
        </button>
    </div>
</div>
</body>
</html>

需要帮助从数组数据动态显示按钮并在每个数据上显示不同的文本

2 个答案: