angular js and jquery integration

joyacv2
joyacv2 used Ask the Experts™
on
Hi,

I have the following part of a code, its work, but when i click a td, i have an angular expression {{car1}} that don't change, what i can do?
 //document ready
          angular.element(document).ready(function () {

              $("td").each(function(){$(this).attr('pr1',parseFloat($(this).html().replace("$","")))});

             $("td").click(function(){
                 $scope.car1 = $scope.car1 + parseFloat($(this).attr('pr1'));
                 alert($scope.car1);
             });


          })
          //fin del document ready

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Apologies - just re-read the question - do you have a page online we can look at?

Author

Commented:
sorry, no

Author

Commented:
i can change using an id and jquery.html() function, but i want to use angular because is more simple and have a currency filter for expressions
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Ok but with only that snippet of code - sort of like bringing the spare tyre of car into the shop and asking why it won't start.

Author

Commented:
ok,

how i update an <span>{{tdclicked}}</span> or any other tag, when i click a 'td' using angular js expressions?
 i want that when i click a td, then the span tag takes its value + the previous value
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
This seems to work
<!doctype html>
<html ng-app="tdtest">
<head>
<title>Test</title>
<style type="text/css"></style>
</head>
<body ng-app="">
<div ng-controller="tdTestController as tdc">
	<table>
		<tr>
			<td>Name</td><td ng-click="tdc.clickTD($event)">John Smith</td>
		</tr>
		<tr>
			<td>Name</td><td ng-click="tdc.clickTD($event)">Jane Doe</td>
		</tr>
	</table>
	<span>{{tdc.tdclicked}}</span>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<!-- <img src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.js"></script>
<script type="text/javascript">
angular.module('tdtest', [])
	.controller('tdTestController', function() {
		var tdc = this;
		tdc.tdclicked = '';
		tdc.clickTD = function (e){	
			tdc.tdclicked = $(e.target).html();
		}
	});
</script>
</body>
</html>

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial