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

Popular posts from this blog

Fail to load namespace Spring Security http://www.springframework.org/security/tags -

sql - MySQL query optimization using coalesce -

unity3d - Unity local avoidance in user created world -