I have a question about the AngularJS editable framework. When using an editable, two buttons appear: the save button and the cancel button. However, I want a third button (with a minus symbol) to delete the text in the editable. How can I add a third delete button?
Here is a fiddle of one of my previous questions:
Example with only two buttons
{{ user.name || 'empty' }}
Don't think they have support for this right now.
I've done it myself.
var app = angular.module("app", ["xeditable"]);
app.run(function (editableOptions) {
editableOptions.theme = 'bs3';
});
app.controller('Ctrl', function ($scope) {
$scope.user = {
name: 'awesome user'
};
$scope.showClear = function () {
$scope.show = true;
}
$scope.empty = function () {
$scope.user.name = "";
$scope.show = false;
}
});
<h4>Angular-xeditable Text (Bootstrap 3)</h4>
<div ng-app="app" ng-controller="Ctrl">
<span href="#" editable-text="user.name" ng-click="showClear()">{{ user.name || 'empty' }}</span>
<button class="btn btn-default" ng-click="empty()" ng-show="show">
-
</button>
</div>
Hope this will help :).
Related
var App = angular.module('myApp', []);
App.controller('myPopoverCtrl',
function($scope){
$scope.myPopover = {
isOpen: false,
open: function open() {
$scope.myPopover.isOpen = true;
},
close: function close() {
// alert('hi');
$scope.myPopover.isOpen = false;
}
};
$scope.SaveNotes = function() {
console.log('hi');
console.log($scope.noteText);
//getting undefined here
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app = "App">
<a uib-popover-template="'AddNote.html'"
popover-title="AddNote"
popover-trigger="'outsideClick'"
ng-controller="myPopoverCtrl"
popover-is-open="myPopover.isOpen"
ng-click="myPopover.open()">Add
</a>
</div>
<script type="text/ng-template" id="AddNote.html">
<div>
<textarea class="form-control height-auto"
ng-model="noteText"
placeholder="This is a new note" ></textarea>
<input class="btn btn-outline btn-primary"
type="button"
ng- click="SaveNotes();" value="Save">
</div>
</script>
I have web a page where i have a button and when click the button popover appears.In that popover i have textarea but when i click save button i want get the text in my controller but i am getting undefined using $scope.modelname
How can i get that data?
I think you want to use a modal rather than a popover like so, as a popover is really just to display text :-
var modalInstance = $modal.open({
animation: $rootScope.animationsEnabled,
templateUrl: 'views/myTemplate.html',
size: 'md'
}).result.then(function(result) {
$scope.result = result;
});
This is what it's designed for more info here.
How to make a header text editable on click of an image button in angular.js? Also how to save the updated value?
<h3 class="m-t-lg m-b-sm inline-block " id="line{{lineId}}">{{headingLineContent}}</h3>
<i class="fa fa-pencil pencil m-l-sm"z></i>
Here id and text are dynamic.
For this you could make use of the x-editable dependency: https://vitalets.github.io/x-editable/
Here is an example of how it's done:
<h4>Angular-xeditable Text (Bootstrap 3)</h4>
<div ng-app="app" ng-controller="Ctrl">
{{ user.name || 'empty' }}
</div>
And here is the JS:
var app = angular.module("app", ["xeditable"]);
app.run(function(editableOptions) {
editableOptions.theme = 'bs3';
});
app.controller('Ctrl', function($scope) {
$scope.user = {
name: 'awesome user'
};
});
See the fiddle:
http://jsfiddle.net/emporio/h1zsw5nu/
And here is the solution to your problem specifically: http://jsfiddle.net/emporio/c3kczqpr/
I'm new in AngularJS. Please have look to this:
Now when user clicks on "All" link, all the 11 check boxes should be checked and when user clicks on "None" link, all the 11 check boxes should be unchecked.
Plus when user check the All others check box, all the bottom 9 check boxes should be checked and when user uncheck the All others check box, all the bottom 9 check boxes should be unchecked.
I'm able to achieve one of the task at a time, but not simultaneously.
So, can anybody please help me to achieve both the tasks simultaneously?
Any help would be appreciated.
You can use
HTML
<body ng-controller="MainCtrl">
<button ng-click="selectAll()">Select All</button>
<button ng-click="clearAll()">Clear All</button>
<input type="checkbox" ng-model="select" ng-click="checkAll()" />
<br />
<p>Checkboxes</p>
<input type="checkbox" ng-repeat="c in checkbox" ng-model="checkbox[$index].selected">
</body>
Angular
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.checkbox = [
{
selected: false
},
{
selected: false
},
{
selected: false
}
];
// Check/uncheck all boxes
$scope.selectAll = function () {
$scope.select = true;
angular.forEach($scope.checkbox, function (obj) {
obj.selected = true;
});
};
$scope.clearAll = function () {
$scope.select = false;
angular.forEach($scope.checkbox, function (obj) {
obj.selected = false;
});
};
$scope.checkAll = function () {
angular.forEach($scope.checkbox, function (obj) {
obj.selected = $scope.select;
});
};
});
Refer fiddle
Html
<button ng-click="selectAll()"> all</button>
<div ng-repeat="item in items">
<input type="checkbox" ng-model="selected[item.id]">
</div>
JQuery
$scope.selected = {};
$scope.selectAll= function(){
for (var i = 0; i < $scope.items.length; i++) {
var item = $scope.items[i];
$scope.selected[item.id] = true;
}
};
you can use ng-Checked
Its makes you easier
refer ng-Checked
<md-checkbox ng-click="checked = !checked; check = {}"></md-checkbox>
<div ng-repeat="item in [1,2,3,4,5]">
<md-checkbox ng-checked="checked || check[item]" ng-click="check[item] = !check[item]" ng-model="sel[item]"></md-checkbox>
</div>
I have 2 buttons in my page "Save Set" & "Load Set".
"Save Set" button has ng-disabled=isSaveDisabled()
.....
.controller('saveLoadSetToolbarBtn', ['$scope','$modal','propertiesModified',
function ($scope,$modal,propertiesModified) {
$scope.loadTuneSet = function () {
$modal.open({
templateUrl: 'loadSetDlg.html',
controller: 'loadSetCtrl'
});
};
$scope.isSaveDisabled = function() {
return !propertiesModified.get();
};
.......
When I click Load Set, it will open a popup and their I'll have OK button. On this click, I should disable the "Save Set" button
OK Button,
.controller('loadSetCtrl', ['$scope', '$modalInstance', 'generalDataService',
function ($scope, $modalInstance, generalDataService) {
$scope.items = [];
$scope.selectedSet = undefined;
$scope.ok = function () {
//doing some logic
closeDialog();
$modalInstance.close();
};
If any value changes happen in my page then this "Save Set" button will be enabled. problem is if I change any value in my page this button is enabling (as expected). If I click "Load Set" button, popup will open and on OK button click (available on Popup) then this "Save Set" should go back to Disable state. I should be able to return boolean value true through this isSaveDisabled function on OK button click.
Simple:
<button ng-model="btnSaveSet" ng-disabled="btnSaveSet_disabled"
ng-click="btnSaveSet_disabled=true">SaveSet</button>
I think you're trying to code a Modal View, like the Demo of this page : http://angular-ui.github.io/bootstrap/ .
I recommend to try this demo and modify it to fit your needs, because there is not much to change. I try to give you some hints in the comments of the code:
This is the JavaScript Code:
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {
$scope.items = ['tuneSet', 'tuneSet2','tuneSet3'];
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'loadSetDlg.html', // name it like the Template for the Modal
controller: 'loadSetCtrl', // name it like the used controller for the Modal
size: size, // not necessary for you
resolve: {
items: function () { // this will pass in your items into the ModalCtrl
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) { // here is the callback, when the
$scope.selected = selectedItem; // Modal get closed
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
// Here you can implement your logic depending on the user-input that is available on $scope.selected
// it is an object.
console.log($scope.selected); // here you can see it in the console.
});
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
angular.module('ui.bootstrap.demo').controller('loadSetCtrl', function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0] // this will catch the user input (click on link)
};
$scope.ok = function () {
$modalInstance.close($scope.selected.item); // this will pass the chosen tuneSet back to
}; // ModalDemoCtrl
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
And this is the HTML you need:
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="loadSetDlg.html">
<div class="modal-header">
<h3 class="modal-title">TuneSet selection!</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
<a ng-click="selected.item = item">{{ item }}</a>
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<button class="btn btn-default" ng-click="open()">Open me!</button>
<button class="btn btn-default" ng-click="open('lg')">Large modal</button>
<button class="btn btn-default" ng-click="open('sm')">Small modal</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
I want that when i click on Update button then it should validate the user as required field, i added attribute e-required but not working.
Please see this fiddle:
http://jsfiddle.net/NfPcH/669/
HTML:
<h4>Angular-xeditable Trigger manually (Bootstrap 3)</h4>
<div ng-app="app" ng-controller="Ctrl">
<span editable-text="user.name" e-form="textBtnForm" buttons="no" e-required />
{{ user.name || 'empty' }}
</span>
<button class="btn btn-default" ng-click="(textBtnForm.$visible && save()) || textBtnForm.$show()" >
{{textBtnForm.$visible | editOrUpdate}}
</button>
</div>
Js Controller:
var app = angular.module("app", ["xeditable"]);
app.filter('editOrUpdate', function() {
return function(arg) {
return (arg) ? 'Update' : 'Edit';
};
});
app.run(function(editableOptions) {
editableOptions.theme = 'bs3';
});
app.controller('Ctrl', function($scope) {
$scope.user = {
name: 'awesome user'
};
$scope.save = function(event){
$scope.textBtnForm.$save();
//save here your data
//call the object that you passed ($scope.user)
//get te specific value at ($scope.user.name)
//alert($scope.user.name);
return true;
};
});
Please help me to resolve this.
Thanks.
Please try as shown below.Good Luck ! :)
Html
<div ng-app="app" ng-controller="Ctrl">
<span editable-text="user.name" e-form="textBtnForm" e-required>
{{ user.name || 'empty' }}
</span>
<button class="btn btn-default" ng-click="textBtnForm.$show()" ng-hide="textBtnForm.$visible">
edit
</button>
</div>
JS
var app = angular.module("app", ["xeditable"]);
app.run(function(editableOptions) {
editableOptions.theme = 'bs3';
});
app.controller('Ctrl', function($scope) {
$scope.user = {
name: 'awesome user'
};
});
Live Demo : JSFiddle