|
"Learning gives Creativity,Creativity leads to Thinking, Thinking provides Knowledge, Knowledge makes you Great"
Showing posts with label angular JS. Show all posts
Showing posts with label angular JS. Show all posts
Friday 12 June 2015
How do I conditionally apply CSS styles in AngularJS?
Thursday 4 June 2015
ng-mouseover and leave to toggle item using mouse in angularjs
HTML Code :
<div ng-controller="Ctrl">
<ul ng-repeat="task in tasks">
<li ng-mouseover="enableEdit(task)" ng-mouseleave="disableEdit(task)">{{task.name}}
<span ng-show="task.editable"><a>Edit</a></span>
</li>
</ul>
</div>
JS Funtion :
(function () {
angular.element(document).ready(function () {
var app = angular.module('myApp', []);
app.controller("Ctrl", function ($scope) {
$scope.tasks = [{
name: 'foo'
}, {
name: 'bar'
}];
$scope.enableEdit = function (item) {
item.editable = true;
};
$scope.disableEdit = function (item) {
item.editable = false;
};
});
angular.bootstrap(document, ['myApp']);
});
}());
<div ng-controller="Ctrl">
<ul ng-repeat="task in tasks">
<li ng-mouseover="enableEdit(task)" ng-mouseleave="disableEdit(task)">{{task.name}}
<span ng-show="task.editable"><a>Edit</a></span>
</li>
</ul>
</div>
JS Funtion :
(function () {
angular.element(document).ready(function () {
var app = angular.module('myApp', []);
app.controller("Ctrl", function ($scope) {
$scope.tasks = [{
name: 'foo'
}, {
name: 'bar'
}];
$scope.enableEdit = function (item) {
item.editable = true;
};
$scope.disableEdit = function (item) {
item.editable = false;
};
});
angular.bootstrap(document, ['myApp']);
});
}());
Subscribe to:
Posts (Atom)