I have input type="checkbox"
<input type="checkbox" {{action 'checkInvoice' item.number}}/>
after ember calls acttion , checkbox loses state. this is simple action code
checkInvoice:function(number){
var invoices=this.get('invoices');
var model=this.get('model');
model.forEach(function(item){
if (item.number===number) {
invoices.pushObject(item);
}
});
return;
}
How embers treats so? or may I reach the same result with ember helper (how to set parameter for action)?
{{input type="checkbox" action='checkInvoice' }}
You can define an itemController for each item in the model, bind the checked property of the checkbox to a property in the itemController and observe the property in the itemController to handle pushing the object into another array.
App.IndexController = Ember.ArrayController.extend({
invoices: [],
itemController: 'indexItem'
});
App.IndexItemController = Ember.ObjectController.extend({
isCheckedChanged: function(){
if(this.get('isChecked')) {
this.get('parentController.invoices').pushObject(this.get('content'));
} else {
this.get('parentController.invoices').removeObject(this.get('content'));
}
}.observes('isChecked')
});
In the template:
{{#each item in model}}
<li>
{{input type="checkbox" checked=item.isChecked}}
{{item.name}}
</li>
{{/each}}
Sample working jsbin .
I have done view for checkbox. use this answer Trigger an action on the change event with Ember.js checkbox input helper?
export default Ember.Checkbox.extend({
hookup: function () {
var action = this.get('action');
if (action) {
this.on('change', this, this.sendHookup);
}
}.on('init'),
sendHookup: function (ev) {
var action = this.get('action'),
controller = this.get('controller');
controller.send(action, this.$().prop('checked'));
},
cleanup: function () {
this.off('change', this, this.sendHookup);
}.on('willDestroyElement')
});
so this is my checkbox
{{view "checkbox" action='testaction' checked=item.selected }}
and after click moved value 'selected' will changed. so I can filter model with selected property. Also can send to action with params
Related
I'm trying to uncheck a checkbox bound using ng-model to a scope variable. Basically the below doesn't uncheck after 2 seconds.
html
<div ng-controller="AppCtrl">
<input type="checkbox" ng-model="checked">
</div>
js
var app = angular.module('app',[]);
function AppCtrl($scope) {
$scope.checked = true;
setTimeout(function(){
$scope.checked = false;
alert('should be unchecked!');
},2000);
}
https://jsfiddle.net/thomporter/tcVhN/
Try to use angular $timeout service instead of javascript's setTimeout
Becuase if you use setTimeout in angularjs you need use $scope.$apply() to ensure the changes in scope. check this fiddle
But $timeout will do this work for you.
Like this
$timeout(function(){
$scope.checked = false;
alert('should be unchecked!');
},2000);
JSFIDDLE
This work fine for me!
HTML FILE
<input type="checkbox" [(ngModel)]="checked" [checked]="checked" (change)="onChange(checked? 'block':'none')">
.TS FILE
export class TopBarComponent implements OnInit {
checked: boolean;
constructor(public dados: DadosService) { }
ngOnInit() {
if(this.dados.meusChamados == 'block')
this.checked = true;
else
this.checked = false;
}
onChange(event : any){
this.dados.meusChamados = event;
}
}
checked = variable created on .ts file
onChange = a function created on .ts file to change the status of a div to display: none|block
You need to set your checked variable to the selected attribute.
<div ng-controller="AppCtrl">
<input type="checkbox" selected="{{checked}}">
</div>
I have a basic ng-repeat where task is sortable
<div ng-sortable="sortableOptions">
<div ng-repeat="task in todo">
{{task}}
...
when a task is draged and droped, it calls $scope.sortableOptions in my controller. I'm wondering if anyone knows how I could pass the task object into that? Could I set it up as a function or..
Basically, I want to pass the task in and update one of the properties inherent to todo.
$scope.sortableOptions2 = {
stop: function(event, ui) {
// do something with the specific todo here
});
}
thank u
If you are using ng-sortable Yeah you can do that ,
<ul data-as-sortable="sortableOptions" data-ng-model="todo">
<li data-ng-repeat="item in todo" data-as-sortable-item>
<div data-as-sortable-item-handle></div>
</li>
</ul>
And in your controller ,
$scope.sortableOptions = {
accept: function (sourceItemHandleScope, destSortableScope) {return boolean}//override to determine drag is allowed or not. default is true.
itemMoved: function (event) {//Do what you want},
orderChanged: function(event) {//Do what you want},
containment: '#board'//optional param.
};
See the documentation here
I am using a checkbox with a function inside the data-bind, but I am unable to check the checkbox.
view:
<input type="checkbox" data-bind="click: function(){ f('hello parameter'); }">Click me
View Model:
var VM = function () {
this.f = function (param) {
alert(param); // here i am getting 'hello parameter'
return true;
}
}
ko.applyBindings(new VM());
Here is my Fiddle
By default, the click binding prevents the default reaction to a click based on the assumption that your JavaScript click event handler will handle everything. You need to return "true" to get the default behavior anyway, which you are doing from your f() function but not the wrapper inside data-bind:
<input type="checkbox" data-bind="click: function() { f('hello parameter'); }">
should be
<input type="checkbox" data-bind="click: function() { return f('hello parameter'); }">
Without context around the code it's not clear how you intend to use this control. With a checkbox you would normally use the checked binding that is bound to a boolean observable:
The checked binding links a checkable form control — i.e., a checkbox () or a radio button () — with a property on your view model.
So another way of writing this using the checked binding would be:
Sample Code:
var VM = function () {
var self = this;
self.myCheck = ko.observable(false);
self.myCheck.subscribe(function () {
alert('checked value = ' + self.myCheck());
});
}
ko.applyBindings(new VM());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div>
<input type="checkbox" data-bind="checked: myCheck" />
Click me
</div>
With this example, there's an observable that tracks the value of the checkbox: self.myCheck. So when the checkbox is checked/unchecked, self.myCheck() will be set to true/false.
In order to provide some output or run some code when the value is changed, I've subscribed to the observable, which basically means that every time the value of the observable is changed, the alert will be fired (or whatever code you place in there).
Demo On JS Fiddle
I need live update my model when I selecting the checkboxes. But when I run this code : TypeError: Cannot read property 'map' of undefined.
After I remove the map function & added console.log(nv).
Then initially it print a empty array. Then while I selecting a checkbox it returns the object correctly. Here is my code. Looking for your help..
//my Controller
$scope.selection = [];
$scope.$watch('items|filter:{selected:true}', function (nv) {
$scope.selection = nv.map(function (item) {
return item.id;
});
}, true);
//view
<div ng-repeat="item in items | filter:global.query | orderBy: name">
<input class="tile-check" id="check-0" type="checkbox" name="delete"
ng-model="item.selected">
</div>
source : http://jsbin.com/ImAqUC/1
Solved. The problem was the $watch is called before set the item variable. So I put a if around that.
if(nv){
$scope.selection = nv.map(function (item) {
return item.id;
});
}
I have a class called Case that contains a list of executionSteps. Each executionStep has a boolean property called enabled. I am trying to set in on the HTML side but it never gets updated on the JS side.
HTML side
<td>
<input type="checkbox"
ng-checked="acase.executionSteps[0].enabled"
ng-model="aa" ng-change="updateCaseExecutionStep('{{study.id}}','{{acase.id}}','{{acase.executionSteps[0].id}}','{{acase.executionSteps[0]}}')"/>
</td>`
On the controller side I have the function
updateCaseExecutionStep
defined as shown below
$scope.updateCaseExecutionStep = function(studyId,caseId,executionStepId,executionStep){
...
...
}
Problem is when I update my checkbox or even manually update the enabled property of the executionStep
$scope.updateCaseExecutionStep = function(studyId,caseId,executionStepId,executionStep){
executionStep.enabled = true;
...
}
I don't see any change. The enabled property of executionStep passed in the JS does not change. Please help.
Do I have to modify somehow on the The HTML side ?
You are trying to force too complex solution. To start with, you do not need ng-checked nor ng-change when you are using ng-model.
Let's say you have the following controller
app.controller('MainCtrl', function($scope) {
$scope.case = {
caseId: 0,
steps: [
{ id: 1, name: 'First step', enabled: true },
{ id: 2, name: 'Second step', enabled: false },
{ id: 2, name: 'Third step', enabled: false }]
};
});
And related HTML
<div ng-repeat="step in case.steps">
<input type="checkbox" ng-model="step.enabled"> {{ step.name }}
</div>
That's all it takes!
Example Plunk here http://plnkr.co/edit/QjD91l
Edit:
If you need to do some processing based on selection, then yes, you could add ng-change to input control. Then HTML becomes
<input type="checkbox" ng-model="step.enabled" ng-change="stateChanged(step)"> {{ step.name }}
And in controller
$scope.stateChanged = function(step){
console.log('Changed step id:' + step.id + ' enabled state to ' + step.enabled;
};
I had to abandon ng-model for my checkbox as it was not picking up the initial value that was set in the model (in response to a service call). All of the other input controls were responding correctly to the model (and, interestingly, were correctly enabled/disabled based on the value backing the checkbox).
Instead, I used the 'checked' attibute and ng-click, as so:
<input type="text" ng-disabled="!myModel.isFruit" ng-model="myModel.seedCount">
<input type="checkbox" checked="{{myModel.isFruit}}" ng-click="onFruitClicked()"> Is Fruit
In my controller:
$scope.myModel = {
isFruit : myServices.getIsFruit(),
seedCount : myServices.getSeedCount()
};
$scope.onFruitClicked = function() {
// toggle the value
$scope.myModel.isFruit = !$scope.myModel.isFruit;
// save the new value
myServices.setIsFruit($scope.myModel.isFruit);
};