javascript - toggle contents onclick button in angularjs -
here jsfiddle demo 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 convert code jquery angular.
so far i'm able convert lot still not able achieve toggling effect can see in jsfiddle demo mentioned above.
here link angularjs demo using plunker.
any appreciated , if can point angularjs tutorials apart official angularjs site tuts great. way ahead learn angularjs in depth.
update:
luckily found bunch of links blog posts, articles, videos, etc learning angularjs, @ 1 place. visit link here , explore 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 mentioned beginner i'd recommend these vid resources if learning things way:
https://www.youtube.com/watch?v=zhfuv0sphcy
lots of small tutorials on parts of angular @ http://egghead.io
also there's #angularjs irc on freenode.net people can pretty helpful , knowledgeable.
if need dom manipulation you'll want use directive. when write directive give name tell should expect find (element/tag e, class c, comment m, or attribute a). here's directive definition hint angularjs plugin in sublimetext:
directive('directivename', [ function(){ //would reference in html <directive-name> note camel case 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, = 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) { } }; }]);
Comments
Post a Comment