2

I have setup my application based on a seed project and I am using Controller Alias (App.routes.js has controllerAS for each controller I am using so ::NE is a controller alias). I have a factory service and manager service that feeds data to the controller. Most of this seems to be working ok.

I am now trying to create a basic HTML view where I display a list of items on the page and when the user selects an item in the list it becomes highlighted (e.g. the CSS updates).

I have managed to get the data to display on the page but when I select an item in the list the CSS style is not updating. My code is below and a screenshot that shows some info I have written out to the log as I click on different items in the list.

node.html

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">List of Nodes</h3>
    </div>
    <div class="panel-body">
        <div>
            <div class="col-sm-4">
                 <h4>Nodes</h4>
                  <div class="list-group">
                          <a ng-repeat="node in ::NE.node" class="list-group-item" ng-class="{active: selected==node}" ng-click="NE.choose(node)">
                            {{node.id}}
                        </a>
                  </div>
            </div>
        </div>
    </div>
</div>

NodeController.js

(function () {
    'use strict';

    angular.module('app.node', ['app.nodeService', 'app.nodeManager'])    
        .controller('NodeController', NodeController);

        NodeController.$inject = ['nodeManager', '$log'];

        function NodeController(nodeManager, $log) {

            var vm = this;

            //*************************************************************************
            //* Populate the nodes initially
            //*************************************************************************
            nodeManager.getNode(0).then(function(node) {
                vm.node = node;
            });

            //*************************************************************************
            //* Actions to take when a node is selected from the list
            //*************************************************************************
             vm.choose = function(node) {
                vm.node.selected = node;
                $log.info('vm.choose called!');
                $log.info('vm.node.selected');
                $log.info(vm.node.selected);
            };

        }
})();

Web and Console Screenshot enter image description here

Improve this question
4
  • use '' in class, ng-class="{'active': ::NE.selected==node}" In Code: vm.selected=node; Commented Mar 9, 2017 at 14:55
  • can you use it like that ? -> ng-repeat="node in NE.node", without the "::" ? ::variable in html means it's a one-time binding so it won't reflect further changes Commented Mar 9, 2017 at 15:01
  • Thanks a lot, this works fine. I am interested to understand what I was doing wrong? Also, when I navigate to another route and come back my selected item is no longer selected - is that expected or can I maintain the selected item? Commented Mar 9, 2017 at 15:19
  • looks like you were missing the quotes around active => 'active' Commented Mar 9, 2017 at 15:25
Related questions
3
Angular directive ng-selected doesn't update model
4
Angular view (DOM elements) not being updated when model changes
1
AngularJS - HTML not updating on variable change
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.