Highlighting selected row in a table

[Roger Nilsson]

Hi,

I am having problem to get the latest selected table row highlighted with Angular, this due to rerouting with ng-view. Whenever the view is rerouted the table-selection disappears. The supplied jsfiddle example illustrates the issue.

The idea is to click once in the left "car brand" table/list and then the selected row should get highlighted, but the way I have done it I need to click twice. The second time angular notice that nothing except for the table has changed, so then it works. Does anybody have a workaround which solves this problem?

http://jsfiddle.net/rognilse/cbXQu/

Thanks,
Roger

[Clint Checketts]

The problem is that the $brand.id isn't getting initialized from the routeParams

function BrandCtrl($scope, $rootScope, $location, $routeParams, Brand) {

    $scope.brandId = $routeParams.brandId;

    ....

}

http://jsfiddle.net/cbXQu/48/

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Roger Nilsson]

Thanks :D that solves one of the problems. The other is that if you scroll down in the brand table and make a selection, the angular routing make the brand table move to the top so that the selection disappears. How do you solve that?

Regards,

Roger

[Clint Checketts]

Benjamin Lesh actually blogged about that just last month: http://www.benlesh.com/2013/02/angular-js-scrolling-to-element-by-id.html

On the $routeChangeSuccess use the $anchorScroll service to scroll to an element.  For some reason I had to wrap it in a $timeout since apparently the element isn't rendered immediately. (Anyone know a better solution?)

    $scope.$on("$routeChangeSuccess", function(current, previous) {

        $timeout(function(){

            $location.hash('brand_id_'+$routeParams.brandId);

            $anchorScroll();

        });

     });

http://jsfiddle.net/cbXQu/49/

[Roger Nilsson]

Thanks, works like a charm :D

[庄有根]

you can use following instead of $timeout
$scope.evalAsync(function(){

    $location.hash('brand_id_'+$routeParams.brandId);

    $anchorScroll();

})

在 2013年3月5日星期二UTC+8下午10时26分58秒，Clint Checketts写道：