javascript - AngularJS - Can I change the value / expersion of ng-repeat in View using a directive -
i have hypothetical question. have 2 object arrays in controller , in view loop through data of 1 of these object arrays. possible me switch value of ng-repart (or change expression) in directive. example...
here controller:
controller('mainctrl', ['$scope', function($scope) { $scope.beatles = [{id:1, name: "john", inst: "guitar", alive: false},{id:2, name: "paul", inst: "bass", alive: true},{id:3, name: "george", inst: "guitar", alive: false},{id:4, name: "ringo", inst: "drums", alive: true}]; $scope.huskers = [{id:1, name: "bob", inst: "guitar", alive: true},{id:2, name: "grant", inst: "drums", alive: true},{id:3, name: "george", inst: "bass", alive: true}]; }])
here view...
<div data-my-template-dir class="beatles"> <div data-ng-repeat="beatle in beatles track $index"> name: {{beatle.name}}, instrument: {{ beatle.inst }} </div> </div>
here directive...
restrict: 'a', link: function (scope, element) { element.bind('click', function () { console.log('i clicked'); element[0].children[0].setattribute('data-ng-repeat','beatle in huskers track $index'); // should go here... scope.apply() ???? });
now, seems directive work model/ctrl... html doesn't seem update in view... going wrong, can update ng-repeat in directive?
i have plunker (or jsbin) here: https://jsbin.com/fasako/edit?html,output
ok, have couple of comments.
first, think there better accomplish want. instead of editing markup, in order angular reprocess markup, in order load different data memory, in order put it's own processed markup on screen.... while making remarkable run-on sentence isn't best programming decision.
i'd suggest having 1 object of data, have ng-click
item chooses array process in ng-repeat
.
i came following example.
angular.module('mymodule',[]) .directive('mytemplate', function() { return { restrict: 'a', template: '<div ng-repeat="item in lists[listselected] track $index">' + 'name: {{item.name}}, instrument: {{ item.inst }}' + '</div>', controller: 'mytemplatectrl' }; }) .controller('mytemplatectrl', ['$scope', function($scope) { $scope.listselected = 'beatles'; $scope.lists = { beatles: [ { id:1, name: "john", inst: "guitar", alive: false }, { id:2, name: "paul", inst: "bass", alive: true }, { id:3, name: "george", inst: "guitar", alive: false }, { id:4, name: "ringo", inst: "drums", alive: true } ], huskers: [ { id:1, name: "bob", inst: "guitar", alive: true }, { id:2, name: "grant", inst: "drums", alive: true }, { id:3, name: "george", inst: "bass", alive: true } ] } ; // should bound scope once arrays exist $scope.changeselection = function() { $scope.listselected = $scope.listselected === 'beatles' ? 'huskers' : 'beatles'; }; }]);
body { font-family: "comic sans ms", "lucida sans unicode", "lucida grande", sans-serif; } .beatles { padding: 10px; border: 1px solid lightblue; background-color: aliceblue; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="mymodule"> <div my-template ng-click="changeselection()" class="beatles"></div> </div>
Comments
Post a Comment