javascript - AngularJS - ng-repeat - conditionally append html -
dear programmers while trying learn angular.js i've stumbled on problem cant solve myself. therefore kindly ask :) start apologise less optimal code... i've started 'adventure' javascript , angular.js :/
i trying write 'simple' webapp present following functionality:
i have 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 db query. each node has number of devices in it. after clicking on name of 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 make query db list of devices belonging node. after want append list div under tag.
i trying 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 click on node link, query made , list of devices (chassis) applied dom, chassies appended somestuff elements residing in ng-repeat. wrong because want chassies applied 1 particular, clicked node.
i don't think need directive. think can simple ng-repeat on node.chassies or create separate object contains them if want, chassies[nodeid]
. similar following might 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 small demo might out.
http://plnkr.co/edit/y8ljusc55ziur478sxvl?p=preview
it has lot of files ones used demo app.js, view1.html, service-utils.js, , index.html.
Comments
Post a Comment