ANgularjs: ng-repeat and nested custom directive

fcracker79

I am trying to ng-repeat a custom directive, which has an attribute that should change over the iteration.

This is my html:

<div ng-controller="WalletsController as controller">
    <bitcoin-address ng-repeat="bitcoin_label in controller.getWallets()"  bitcoin-label="bitcoin_label"></bitcoin-address>
</div>

This is my controller:

(function() {
var app = angular.module('wallets', [ ]);

app.controller(
        "WalletsController",
        function($scope, $http) {
            this.wallets = [];

            var controller = this;

            this.getWallets = function() {
                return controller.wallets;
            };

            $http.get("wallet_addresses").success(
                    function(data) {
                        for (var i = 0; i < data.length; i++) {
                            var curWallet = data[i];
                            $scope[curWallet.label] = {
                                label: curWallet.label,
                                address: curWallet.address,
                                balance: curWallet.balance
                            };
                            controller.wallets.push(curWallet.label);
                        }
                    }
            );
        });

app.directive(
        'bitcoinAddress',
        function() {
            return {
                restrict: 'E',
                templateUrl: '../../resources/html/bitcoin-address.html',
                scope: {
                    bitcoinLabel: '=',
                }
            };
        }
);
})();

And this is my template:

<div class="col-md-8 dashboardAddressCell dropdown-toggle" data-toggle="dropdown">{{bitcoinLabel.address}}</div>

What happens is that the template can not resolve the bitcoinLabel variable. I have tried specifying a constant value and the template works. My conclusion is that I am not correctly specifying the bitcoin_label attribute in the html section.I have also tried using {{bitcoin_address}}, but angularjs complains about that.

I have also tried with the following html code:

<div ng-controller="WalletsController as controller">
        <!-- <tr><th>Indirizzo</th><th>Saldo</th><th></th>-->
        <div ng-repeat="bitcoin_label in controller.getWallets()">
            {{bitcoin_label}}
            <bitcoin-address bitcoin-label="bitcoin_label"></bitcoin-address>
        </div> 
        <bitcoin-address  bitcoin-label="ciccio"></bitcoin-address>
    </div>

It does not work either, but at least it shows the {{bitcoin_label}} value.

dfsq

The problem seems pretty simple. Instead of

controller.wallets.push(curWallet.label);

you should push corresponding $scope[curWallet.label] object:

controller.wallets.push($scope[curWallet.label]);

Because curWallet.label is just a string so in the first case wallets ends up as array of stings. However you need wallets to be an array of objects, each having address, label, balance properties.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

Angularjs Nested ng-repeat with conditional caluse

분류에서Dev

AngularJs using ng-repeat in a directive gives type error

분류에서Dev

How to create a custom directive for ng-table (using different data for the table and ng-repeat)

분류에서Dev

ng-repeat of a directive and $validators

분류에서Dev

Nested directive and ng-repeat exception TypeError: Cannot read property 'insertBefore' of null

분류에서Dev

angular directive ng-repeat scope and Service

분류에서Dev

In AngularJS, How do I create a custom validation directive that takes a $scope variable and compares it for equality to the ng-model?

분류에서Dev

Hide/show an element in Angularjs using custom directive, ng-show and $scope

분류에서Dev

AngularJS ng-repeat in this model

분류에서Dev

AngularJS IF ELSE with ng-repeat

분류에서Dev

AngularJS ng-repeat in modal

분류에서Dev

AngularJS: nested ng-repeat (array in object) only works if there is one item in array, not when multiple

분류에서Dev

AngularJS dynamic custom directive issue

분류에서Dev

AngularJS nested ng-repat in ng-repeat (key, value) pair data structure in HTML table element with sort filter

분류에서Dev

ng-class not working on a custom directive with templateURL

분류에서Dev

anjularjs push value to nested ng-repeat

분류에서Dev

Angular ng-repeat with routeParams and nested array

분류에서Dev

Nested JSON in one ng-repeat

분류에서Dev

input tag inside ng-repeat angularjs

분류에서Dev

Angularjs ng-repeat 새 요소

분류에서Dev

AngularJs ng-repeat in group class

분류에서Dev

AngularJs ng-repeat by track by not updated

분류에서Dev

AngularJs. ng-repeat 문제

분류에서Dev

Ng repeat error on form validating angularjs dupes

분류에서Dev

Show ng-repeat selectively in AngularJs

분류에서Dev

AngularJS - check for null item in ng-repeat

분류에서Dev

Accessing Controller variable in ng-repeat in AngularJS

분류에서Dev

AngularJS-ng -repeat 문제

분류에서Dev

Angularjs orderBy in ng-repeat not working as expected

Related 관련 기사

  1. 1

    Angularjs Nested ng-repeat with conditional caluse

  2. 2

    AngularJs using ng-repeat in a directive gives type error

  3. 3

    How to create a custom directive for ng-table (using different data for the table and ng-repeat)

  4. 4

    ng-repeat of a directive and $validators

  5. 5

    Nested directive and ng-repeat exception TypeError: Cannot read property 'insertBefore' of null

  6. 6

    angular directive ng-repeat scope and Service

  7. 7

    In AngularJS, How do I create a custom validation directive that takes a $scope variable and compares it for equality to the ng-model?

  8. 8

    Hide/show an element in Angularjs using custom directive, ng-show and $scope

  9. 9

    AngularJS ng-repeat in this model

  10. 10

    AngularJS IF ELSE with ng-repeat

  11. 11

    AngularJS ng-repeat in modal

  12. 12

    AngularJS: nested ng-repeat (array in object) only works if there is one item in array, not when multiple

  13. 13

    AngularJS dynamic custom directive issue

  14. 14

    AngularJS nested ng-repat in ng-repeat (key, value) pair data structure in HTML table element with sort filter

  15. 15

    ng-class not working on a custom directive with templateURL

  16. 16

    anjularjs push value to nested ng-repeat

  17. 17

    Angular ng-repeat with routeParams and nested array

  18. 18

    Nested JSON in one ng-repeat

  19. 19

    input tag inside ng-repeat angularjs

  20. 20

    Angularjs ng-repeat 새 요소

  21. 21

    AngularJs ng-repeat in group class

  22. 22

    AngularJs ng-repeat by track by not updated

  23. 23

    AngularJs. ng-repeat 문제

  24. 24

    Ng repeat error on form validating angularjs dupes

  25. 25

    Show ng-repeat selectively in AngularJs

  26. 26

    AngularJS - check for null item in ng-repeat

  27. 27

    Accessing Controller variable in ng-repeat in AngularJS

  28. 28

    AngularJS-ng -repeat 문제

  29. 29

    Angularjs orderBy in ng-repeat not working as expected

뜨겁다태그

보관