AngularJS - ng-repeat - conditionally append html

Question

Dear programmers while trying to learn Angular.JS I've stumbled on a problem I cant solve myself. Therefore I kindly ask for your help :) From start I would like to apologise for the less than optimal code... I've just started my 'adventure' with javascript and angular.js :/

I am trying to write a 'simple' webapp that would present following functionality:

I have a list of nodes

<div ng-repeat="node in nodes | filter:search" id="node{{node.id}}">
    <a ng-click="appendChassis()">{{node.nazwa}}</a>
    <button class="btn"><i class="icon-plus-sign"></i> add</button>
    <div some-stuff="myToggle($index)" class="someStuff" id="dupa{{node.id}}"></div>
</div>

Those nodes come from db query. Each node has a number of devices in it. After clicking on the name of the device

<a ng-click="appendChassis()">{{node.nazwa}}</a>

through

$scope.appendChassis = function() {

    var index = this.$index;
    $scope.myIndex = index;
    $scope.chassis = Chassis.query({nodeId: $scope.nodes[index].id});

}

I would like to make another query to db for the list of devices belonging to this node. After that I want to append that list to a div under a tag.

I was trying to achieve such functionality using directive

var Powiadomienia = angular.module("Powiadomienia",["ngResource"]).
config(function($routeProvider) {
    $routeProvider.
        when('/', { controller: ListCtrl, templateUrl: 'list.html' }).
        //when('/tt/:ttId', { controller: ListTT, templateUrl: 'ttList.html' }).
        otherwise({ redirectTo: '/' });
}).directive('someStuff', function () {
    return {
        restrict: 'E,A',
        transclude: true,
        templateUrl: 'chassies.html',
        scope: true,

        //link: function($scope, $element, $attrs, $controller) {
        link: function(scope, element, attrs, controller) {
                $scope.Chassis_instance.query({nodeId: $scope.nodes[$scope.myIndex].id});

                if(scope.$eval(attrs.someStuff)) {
                    // remove '<div ng-if...></div>'
                    element.replaceWith(element.children())
                } else {
                    element.replaceWith(' ')
                }
            }

    }
});

This solution works partially, meaning when I click on the node link, the query is made and the list of devices (chassis) is applied to the DOM, however the chassies are appended to all someStuff elements residing in ng-repeat. This is obviously wrong because I want the chassies to be applied to only one particular, clicked node.

Answer 1

I don't think you need a directive. I think you can just do a simple ng-repeat on your node.chassies or create a separate object that contains them if you want, chassies[nodeid]. Something similar to the following might help you out:

<div ng-repeat="node in nodes | filter:search" id="node{{node.id}}">
    <a ng-click="appendChassis(node)">{{node.nazwa}}</a>
    <button class="btn"><i class="icon-plus-sign"></i> add</button>
    <div some-stuff="myToggle($index)" class="someStuff" id="dupa{{node.id}}">
       <a href='' ng-repeat='device in node.chassies'>{{device.name}}</a>
    </div>
</div>


$scope.appendChassis = function(node) {

    $scope.chassis = Chassis.query({nodeId: node.id}).then(function(data) {
       node.chassies = data;
    });

  }

I created a small demo that might help you out.

http://plnkr.co/edit/Y8ljusc55ziuR478SXVl?p=preview

It has a lot of files but the ones used for this demo are app.js, view1.html, service-utils.js, and index.html.