Here is the JSFIDDLE DEMO which i created using JQuery.
$(function(){
$("#describe-block-toggle-btn").click(function(){
$("#ptor-it-block").toggle();
$(this).text(function(i, text){
return text === "Start" ? "Stop" : "Start";
})
});
$("#it-block-toggle-btn").click(function(){
$(this).text(function(i, text){
return text === "Start" ? "Stop" : "Start";
})
});
});
I need to convert my code from JQuery to Angular.
So far I'm able to convert a lot but still not able to achieve the toggling effect as you can see in JSFIDDLE DEMO as I mentioned above.
Here is the link to ANGULARJS DEMO using plunker.
Any help would be appreciated and if someone can point to good angularjs tutorials apart from the official angularjs site tuts it would be great. Way ahead to learn angularjs in depth.
UPDATE:
Luckily I found a bunch of links to blog posts, articles, videos, etc for learning AngularJS, all at one place. Visit the link here and the explore the infinity.
http://plnkr.co/edit/VMfKJ2IKJ9WNRPlwE8Su
HTML
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="style.css" />
<script src="http://code.angularjs.org/1.1.4/angular.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="ptorJasmineAddon">
<div id="ptor-nav-addon">
<span>
{{describeButtonData.block}}
<button ng-click="changeStatus(describeButtonData)">{{describeButtonData.status}}</button>
</span>
<span ng-show="describeButtonData.status == 'Stop'">
{{itButtonData.block}}
<button ng-click="changeStatus(itButtonData)">{{itButtonData.status}}</button>
</span>
</div>
</div>
</body>
</html>
JS
// Code goes here
var app = angular.module('myApp', []);
app.controller('ptorJasmineAddon', function($scope) {
$scope.describeButtonData = {
'block': 'Describe Block',
'status': 'Start',
'btnId': 'describe-block-toggle-btn',
'id': 'ptor-describe-block'
}
$scope.itButtonData = {
'block': 'It Block',
'status': 'Start',
'btnId': 'ptor-it-block',
'id': 'ptor-it-block'
};
$scope.shown=true;
$scope.changeStatus = function(btn) {
btn.status = btn.status === "Start" ? "Stop" : "Start";
console.log(btn);
};
});
Since you mentioned your a beginner too I'd recommend these vid resources if you like learning about things this way:
https://www.youtube.com/watch?v=ZhfUv0spHCY
lots of small tutorials on parts of angular at http://egghead.io
Also there's a #angularjs IRC on freenode.net where people can be pretty helpful and knowledgeable.
If you need to do some DOM manipulation you'll want to use a directive. When you write a directive you basically give it a name then tell it where you should expect to find it (element/tag E, class C, comment M, or attribute A). Here's the directive definition hint from the AngularJS plugin in SublimeText:
directive('directiveName', [ function(){ //would reference in html like <directive-name> note camel case to snake case conversion
// Runs during compile
return {
// name: '',
// priority: 1,
// terminal: true,
// scope: {}, // {} = isolate, true = child, false/undefined = no change
// controller: function($scope, $element, $attrs, $transclude) {},
// require: 'ngModel', // Array = multiple requires, ? = optional, ^ = check parent elements
// restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment
// template: '',
// templateUrl: '',
// replace: true,
// transclude: true,
// compile: function(tElement, tAttrs, function transclude(function(scope, cloneLinkingFn){ return function linking(scope, elm, attrs){}})),
link: function($scope, iElm, iAttrs, controller) {
}
};
}]);
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments