I am trying to have two multiple select lists that I am trying to do the typical add/remove between the two. I am able to add and remove initially and save the array of values from the second g:select but I cannot seem to repopulate the second g:select when I try to show the user an updated value.
<table class="threecols">
<tr>
<td style="width: 10%">
<g:select multiple="true" id="select1" name="select1" from="${['User','Department','School','Class','User','Id','District']}" disabled="${disabled}"/>
</td>
<td style="width: 10%">
<button type="button" style="margin-left: 12px">Add >>
</button>
<button type="button"><< Remove </button>
</td>
<td style="width: 10%">
<g:select multiple="true" id="select2" name="paramList" from="${report?.paramList}" value="${report?.paramList}" disabled="${disabled}"/>
</td>
</tr>
</table>
and the variable declaration is: String[] paramList
Any help is appreciated.
You need to use JQuery to do this:
$(document).ready(function() {
$('#add').click(function(){
$('#select2 option:selected').each( function() {
$('#select1').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
$(this).remove();
});
});
$('#remove').click(function(){
$('#select1 option:selected').each( function() {
$('#select2').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
$(this).remove();
});
});
});
More Info here: Link
I was being stupid and was using report?.paramList when I should have used reportInstance?.paramList since report is just the class where reportInstance was a singular object. Woops.
Related
I want to toggle the visibility of a button based of a value of an item
Here is my code:
<tbody>
<tr *ngFor="let item of statusConfig | slice:0:9; let i = index;" >
<td class="col-md-1">
{{item.id}}
</td>
<td class="col-md-3">
{{item.activityName}}
</td>
<td class="col-md-2">
{{item.activityStatus}}
</td>
<td class="col-md-3">
{{item.activityDateEpoch | date: 'yyyy-MM-dd HH:mm:ss'}}
</td>
<td class="col-md-3">
<button *ngIf=item.activityStatus!=("Done") type="button" class="btn btn-primary" (click)="saveStatus(item.id, i)">Mark as done</button>
</td>
</tr>
</tbody>
why is this a syntax error and how should I fix this?
directive_normalizer.js:82 Uncaught Error: Template parse errors:
Unexpected closing tag "button" ("tyStatus!="Done" type="button" class="btn btn-primary" (click)="saveStatus(item.id, i)">Mark as done[ERROR ->]</button>
</td>
"): ReportComponent#45:145
and
activityStatus = "Done" for now
I'm in shock how many mistakes you managed to make in one line of code. :-)
First: NgIf directive accepts string as expression value, which means it has to have the following form:
*ngIf="expression here"
Second: You can't use " two times, if you want to use string in ", you should use single quotes then (')
Third: Brackets are not needed: ("Done")
Anyway, your expression should look like this:
*ngIf="item.activityStatus != 'Done'"
You can read more about NgIf directive here.
It should be,
*ngIf="(item.activityStatus!='Done')"
I am trying to make a series of rows based off of an array of objects. i am trying to produce a series of columns displaying each property of the objects (each has the same properties), with rows showing the property values.
I am currently using the following code.
<div ng-controller="HomepageController" >
<!-- form holding the name -->
<form td-ui-grid-row ng-controller="HomepageController"
ng-submit="vm.addData()" class="form-inline party-form" ng-repeat="dataEntry in vm.dataList">
<div td-ui-grid-col="3xs" ng-repeat="dataContent in dataEntry">
dataContent:{{dataContent}}
</div>
</form>
</div>
vm.data is the following series of data: [{"name":"davis","phone":"11111111111"},{"name":"graeham","phone":"222222222222"},{"name":"eric","phone":"33333333333"}]
and i want to produce the table of vales to look like:
davis graeham eric
11111111111 222222222222 33333333333
however, I am getting the inverse:
davis 11111111111
graeham 222222222222
eric 33333333333
I simplified the code so that it is easier to look and work with:
<div ng-controller="HomepageController" >
<!-- form holding the name -->
<form td-ui-grid-row ng-controller="HomepageController" ng-submit="vm.addData()" class="form-inline party-form">
<table>
<tr>
<td ng-repeat="person in vm.dataList">
<input ng-model="vm.newData.name" type="text" class="form-control" placeholder="{{person.name}}" required>
</td>
</tr>
<tr>
<td ng-repeat="person in vm.dataList">
<input ng-model="vm.newData.name" type="text" class="form-control" placeholder="{{person.phone}}" required>
</td>
</tr>
</table>
</form>
</div>
This code is now showing the proper output format, however i need to be able to cycle through any number of object attributes
.directive('tdUiGridRow', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.addClass('td-row');
if (attrs.tdUiGridRow) {
element.addClass('td-row-type-'+attrs.tdUiGridRow);
}
}
};
})
Please do below. You would create two loops, one for name and one for phone.
<div><span ng-repeat="contact in vm.data">{{contact.name}}</span></div>
<div><span ng-repeat="contact in vm.data">{{contact.phone}}</span></div>
This simply requires looping through the data multiple times, and extracting one property each time.
<table>
<tr>
<td ng-repeat="person in data">{{person.name}}</td>
</tr>
<tr>
<td ng-repeat="person in data">{{person.phone}}</td>
</tr>
</table>
http://plnkr.co/edit/tXmaTmPuwbsN62cQLJuF?p=preview
HTML
<input type="search" placeholder="Filter" ng-model="searchstr" ng-change="details()">
<table style="width:831px;overflow:auto">
<tr ng-repeat="d in details" ng-if="$index%3==0">
<td style="height:232px;width:164px;" ng-if="details[$index]">{{details[$index].CourseName}}<br>{{details[$index].Professor}}<br>{{details[$index].CourseDuration}}</td>
<td style="height:232px;width:164px;" ng-if="details[$index+1]">{{details[$index+1].CourseName}}<br>{{details[$index+1].Professor}}<br>{{details[$index+1].CourseDuration}}</td>
<td style="height:232px;width:164px;" ng-if="details[$index+2]">{{details[$index+2].CourseName}}<br>{{details[$index+2].Professor}}<br>{{details[$index+2].CourseDuration}}</td>
</tr>
</table>
js file
$scope.data=function()
{
$scope.details=$filter("filter")($scope.details,$scope.searchstr);
}
I have tried like above but only for the first time its displaying
I got it.I just changed the slight logic in js file.I am posting it as it may be helpful to somebody else.
First i just copied the $scope.details to d and filtered with the temp variable d.
$scope.searchstr="";
var d=$scope.details;
$scope.data=function()
{
$scope.details=$filter("filter")(d,$scope.searchstr);
}
You don't need the $scope.data function. You use the builtin angular filter like
<tr ng-repeat="d in details | filter:searchstr" ng-if="$index%3==0">
I have a question about data binding using knockout.
Here's the problem: I have a table, I what I would like to do is that when a row in table is clicked, I want the values of the row to appear in the input fileds which are located above the table.
so here'
<tbody data-bind="foreach: customers">
<tr data-bind="click: doSomething">
<td data-bind="text: date"></td>
<td data-bind="text:staff"></td>
<td data-bind="text: ftype"></td>
<td data-bind="text: value"></td>
<td data-bind="text: message"></td>
</td>
</tr>
</tbody>
In my viewmodel, I have the following function:
doSomething: function(data) {
var self = this;
self.date(data.date);
self.staff(data.staff);
self.ftype(data.ftype);
self.value(data.value);
self.message(data.message);
}
Here's the error I am getting:
["Unable to parse bindings.↵Message: ReferenceError:… is not defined;↵Bindings value: click: doSomething", "views/myView/index", Object]
0: "Unable to parse bindings.↵Message: ReferenceError: doSomething is not defined;↵Bindings value: click: doSomething"
1: "views/myView/index"
2: Object
length: 3
__proto__: Array[0]
Let me know if I need to provide any more details. I will appreciate your help fplks!
A very basic pattern for this type of thing is to have an array of items and a selectedItem observable that you populate when selecting a row.
Then, you can use the with binding around a section to create your editor.
<table>
<tbody data-bind="foreach: customers">
<tr data-bind="click: $root.selectedCustomer">
<td data-bind="text: name"></td>
</tr>
</tbody>
</table>
<hr/>
<div data-bind="with: selectedCustomer">
<input data-bind="value: name" />
</div>
Sample: http://jsfiddle.net/rniemeyer/Z6VPV/
You need to bind your model to the view
var currentViewModel = function(){
this.doSomething = function(data){
var self = this;
self.date(data.date);
self.staff(data.staff);
self.ftype(data.ftype);
self.value(data.value);
self.message(data.message);
}
var viewModel = new currentViewModel();
ko.applyBindings(viewModel);
I have a table which is shown below. When multiple data comes, it is shown properly but if a single data come, data isn't shown in the table. I suspect absence of brackets in single data..
Multiple Data Sample:
[{"Id":1,"Name":"Tomato soup","Category":"Groceries","Price":1.39},{"Id":2,"Name":"Yo-yo","Category":"Toys","Price":3.75},{"Id":3,"Name":"Hammer","Category":"Hardware","Price":16.99}]
Single Data sample
{"Id":1,"Name":"Tomato soup","Category":"Groceries","Price":1.39}
Table and scripts:
<script type="text/javascript">
$(document).ready(function () {
function ProductViewModel() {
var self = this;
self.productData = ko.observable();
self.productId = ko.observable();
self.getAllProducts = function () {
$.get('/api/products', {}, self.productData);
};
self.getProductById = function () {
$.get('/api/products/' + self.productId(), {}, self.productData);
};
}
ko.applyBindings(new ProductViewModel());
});
</script>
<input id="txtId" type="text" data-bind="value: productId" />
<button id="btnGetSpeProduct" data-bind="click: getProductById">Get Product By Id</button>
<button id="btnGetProducts" data-bind="click: getAllProducts">Get All Products</button><br />
<table data-bind="with: productData">
<thead>
<tr>
<th>
Name
</th>
<th>
Category
</th>
<th>
Price
</th>
</tr>
</thead>
<tbody data-bind="foreach: $data">
<tr>
<td data-bind="text: Name">
</td>
<td data-bind="text: Category">
</td>
<td data-bind="text: Price">
</td>
</tr>
</tbody>
</table>
The foreach binding can accept either an array or an object specifying various options. In this case, Knockout thinks the object you're giving it is the latter. It will work if you use the object syntax and specify your data using the data option.
<tbody data-bind="foreach: {data: $data}">
Sample: http://jsfiddle.net/mbest/Dta48/
Yes - it has everything to do with the "absence of brackets in single data".
The one with brackets means that it's an array; a list which can can iterate (foreach).
The one without brackets means that it's an object; something which can be stored inside an array, but can not be iterated using foreach.
So, you want it to act like an array so you can iterate over the result. First step, you'll need to use an observableArray instead of observable:
self.productData = ko.observableArray();
Next, you'll need to push the data you $.get to that array, instead of directly binding them.
$.get('/api/products', function(data) {
// Iterate over the data variable, and use
// self.productData.push(ITEM)
// to add it to the array
});
That should do it - good luck!
use observableArray instead of observable
self.productData = ko.observableArray();