i am trying to pass on the column value to the function when the particular column is clicked using ng-click of angular in wijmo grid column.I am getting undefined as value. How do we pass on the associated column value/row value when the checkbox is selected for each row.
my code:
HTML
<wj-flex-grid items-source="instances">
<wj-flex-grid-column header="Select" >
<input type="checkbox" binding = "machinename" ng-click= "model.funcall(args)"/>
</wj-flex-grid-column>
<wj-flex-grid-column header="Application" binding="appname" ></wj-flex-grid-column>
<wj-flex-grid-column header="Server" binding="machine"></wj-flex-grid-column>
<wj-flex-grid-column header="Instance" binding="instancename"></wj-flex-grid-column>
<wj-flex-grid-column header="Last Updated" binding="lastupdated"></wj-flex-grid-column>
<wj-flex-grid-column header="Status" binding="state"></wj-flex-grid-column>
<wj-flex-grid-column header="Error" binding="error"></wj-flex-grid-column>
</wj-flex-grid>
JS
$scope.model.funcall = function funcall(args){
console.log("function called");
console.log(args);
}
You should replace args with $item in order to get the dataItem of that particular row. Here is the code:
input type="checkbox" binding = "machinename" ng-click= "model.funcall($item)"/>
For more details on $item, you can refer to the following doc link:
http://wijmo.com/5/docs/topic/wijmo.angular.WjFlexGridCellTemplate.Class.html
Related
currently struggling with a thing that I thought would be easy...
I'm trying to update a value in a ng-repeat directive using a select dropdown.
Here is what the HTML looks like:
<div ng-repeat="groupeQuestions in questionnaire.GroupesQuestions" class="umb-group-builder__group">
<select ng-model="groupeQuestions.TypeQuestionId" ng-options="value.Id as value.Description for value in typesQuestions ">
</select>
<input type="text" ng-model="groupeQuestions.TypeQuestionId"/>
<button ng-click="saveGroupeQuestions({{groupeQuestions}})" >Sauvegarder</button>
<button ng-click="deleteGoupeQuestions({{groupeQuestions.Id}})" >Supprimer</button>
</div>
And here is the js controller function used to update the item :
$scope.saveGroupeQuestions = function (groupeQuestions) {
console.log(groupeQuestions);
surveyPluginResource.saveGroupeQuestions(groupeQuestions).then(function (response) {
$scope.questionnaire = response.data;
navigationService.syncTree({ tree: 'survey', path: [-1, -1], forceReload: true }).then(function (syncArgs) {
navigationService.reloadNode(syncArgs.node);
});
});
};
Somehow, I'm missing something with the binding thing, because if I change the value in the dropdown, the textbox is updating as well.
But when it reaches the controller, the console.log() displays the item which does not contain the new groupeQuestions.TypeQuestionId.
I'm new to js and angularJs too, so is there something on binding that I've missed?
Don't use {{}} interpolation when passing a scope variable to a function
<button ng-click="saveGroupeQuestions(groupeQuestions)" >Sauvegarder</button>
<button ng-click="deleteGoupeQuestions(groupeQuestions.Id)" >Supprimer</button>
I am working with typeahead directive in angular-bootstrap. My problem is when user change the input, I want to trigger a ng-change event to get the list from the server, then filter the results. After that I want to see the list to be populated with uib-typeahead. For that, I am using an array $scope.list to store the result from the server and then I pass it into uib-typeahead as
<div class="input-group">
<input type="text" class="form-control" ng-model="asyncSelected" placeholder="Search city or zip code"
ng-change="getLocationForSearch(asyncSelected)"
uib-typeahead="item for item in list" />
</div>
In the getLocationForSearch method, I update the list. I print the list in the console and it return correct value, however the list is not populated correctly in the dropdown. My plunkr is http://plnkr.co/edit/diot4RvsIdWht1zM3NeE?p=preview
Thanks
You can do it as part of the typeahead directive without ng-change:
<input type="text" class="form-control" ng-model="asyncSelected" placeholder="Search city or zip code"
uib-typeahead="item for item in getLocationForSearch($viewValue)" />
And then just return the list from the getLocationForSearch function. Here is a working plunker:
http://plnkr.co/edit/795euBYoCKxwzORoT2Hp?p=preview
Add this directive to your input:
<input ... typeahead-on-select="onSelect($item, $model, $label)" />
Then remove ng-change
And finally, add onSelect function to your scope:
$scope.onSelect = function($item, $model, $label) {
// do whatever you like
}
I have a requirement to pre-populate an input field with the value of another input field. So, once the first field loses focus, the second field gets the same value. The field is editable, but initially, it has the value of the first field. I've found that the ngModel of the second field is not updated.
I do this to set the value of the second field:
$("#" + fieldId).val(newstring);
Here's the HTML for the first field:
<td class="formLabel" vAlign="top" align="left">
<input validate-date-time val-type="date" val-start="true" val-end-id="endDate" id="startdate" size="10" max="10" width="20" ng-model="newEvent.startDate">
mm/dd/yyyy
</td>
Here's the HTML for the second field:
<td class="formLabel" vAlign="top" align="left">
<input size="10" validate-date-time val-type="date" id="endDate" max="10" width="20" ng-model="newEvent.endDate">
mm/dd/yyyy
</td>
This is done in a directive, by the way. Any pointers on how to make this work?
I've tried calling scope.$apply and scope.$digest after setting the input val to no avail. And if I shouldn't use jQuery, whats the angular way of setting the value?
Thanks
Try something like this:
// in the controller, add
$scope.isStartDateInitialized = false;
$scope.onStartDateSet = function() {
if (!$scope.isStartDateInitialized) {
$scope.isStartDateInitialized = true;
$scope.newEvent.endDate = $scope.newEvent.startDate;
}
};
<!-- add the following attribute to the start date input -->
<input ... ng-blur="onStartDateSet()" />
NOTE 1: The above code assumes that you only want to programmatically update the end date the very first time the start date is set. If you want it to always be set to the start date when the start date changes, then you can use ng-change instead of ng-blur.
NOTE 2: You should remove the following JQuery code that you mentioned:
$("#" + fieldId).val(newstring);
I'm trying to create a row of menu items that can be reordered by drag and drop. How can I bind a field called order in my model to the index?
this throws errors for me
<menu-row ng-repeat="i in menus"></ng-repeadt>
int the directive template:
<input field="hidden" name="order" ng-model="i.order = $index" />
I get this error
https://docs.angularjs.org/error/ngModel/nonassign?p0=i.order
But it does seem to bind the number ok. If I set the display it works.
You can't assign in the ng-model, instead, assign in ng-init
<input field="hidden" name="order" ng-init="i.order = $index" ng-model="i.order" />
Using ng-repeat I display some radio's in the edit form:
<label style="float: left;margin-right: 3px;" data-ng-repeat="gender in genders" data-ng-hide="$first">
<input type="radio" name="gender" value="{{gender.Id}}" data-ng-model="customerFormData.customer.Gender.Id" />{{gender.Description}}
</label>
As you can see, I've applied the 'dot practice'. The edit form is a pop-up over my detail form. In my detail form I have this:
<tr>
<td>Gender:</td>
<td>{{ customer.Gender.Description }} </td>
</tr>
All my bindings in the edit form are working, but I can't get the gender binding to work. I think it has something to do with scope inheriting by the use of ng-repeat.
I've also tried to use $parent, but the outcome remains the same:
<label style="float: left;margin-right: 3px;" data-ng-repeat="gender in genders" data-ng-hide="$first">
<input type="radio" name="gender" value="{{gender.Id}}" data-ng-model="$parent.customerFormData.customer.Gender.Id" />{{gender.Description}}
</label>
Setting the initial value works. When a female is set, the female radio is selected and when it is a male, the male radio is selected.
A second problem is (and I think it has to do with the binding), is that when Male is selected, I have to click twice on female to get female selected.
Edit: I've created a Fiddle to illustrate my issue.
One solution is to use ng-value(which evaluates its content as an expression) and set it to the whole gender object, and set ng-model to the Gender object on your FormData. This way, when you change the input, the gender object is set to FormData.Gender and you have access to both Id and Descr.
<label ng-repeat="gender in genders">
<input type="radio" name="gender" ng-value="gender" ng-model="customer.FormData.Gender">
{{gender.Descr}}
</label>
http://jsfiddle.net/ADukg/3194/
If you just want the Id in the model, you can use: (value evaluates its content as a string)
<label ng-repeat="gender in genders">
<input type="radio" name="gender" value="{{gender.Id}}" ng-model="customer.FormData.Gender.Id">
{{gender.Descr}}
</label>
And in the controller:
$scope.customer.FormData.Gender = {Id : $scope.genders[1].Id};
http://jsfiddle.net/ADukg/3195/
Strangely enough, it doesn't work when you set value and model to Id, but initially bind a whole gender object to the gender model. Weird!
I can't explain it 100% accurately. But you have too many nested objects in your scope!
Look at this example (fiddle: http://jsfiddle.net/ADukg/3193/)
<div ng-controller="MyCtrl">
<label ng-repeat="gender in genders">
<input type="radio" name="gender" value="{{ gender.Id }}" ng-model="$parent.selectedGenderId">{{gender.Descr}}
</label>
</div>
function MyCtrl($scope) {
$scope.genders = [{Id: 1, Descr:'Male'}, {Id:2, Descr:'Female'}];
$scope.selectedGenderId = $scope.genders[1].Id;
$scope.$watch('selectedGenderId', function(newValue, oldValue) {
console.log("selectedGenderId=" + newValue);
// TODO: set it into FormData?
});
}
If you set the "selectedGenderId" directly it will also be set correctly.
I think the selection problem has nothing to do with the binding directly but with the scope and nesting of scopes via the many objects.
Take also look at this explanation:
http://jimhoskins.com/2012/12/14/nested-scopes-in-angularjs.html
The problem lies with the binding on the radio buttons. You are binding on the customer.FormData.Gender.id model - note it is the id property that you bind to and not the Gender property.
Thus, when you select the radio button for Male, only the ID on the gender is changed - not the Descr field. This explains clearly the behaviour. When you select different radio buttons, notice how only the ID gets updated and not the Desc.
To change the Descr field as well, you will be wise to have a dedicated model for the radio buttons and then respond to changes to this model.
This is demonstrated in this fiddle.