How do I remove an object from an array of objects. in knockoutJS. Error: Object doesn't support property or method 'remove' - jquery-ui

How do I remove an object from an array of objects in Knockoutjs.
I am new to knockoutjs and any help will be appreciated.
A link to Jsfiddle
Line 24 in the HTML code on jsfiddle is the click binding to delete.
Line 67 in the javascript code on js fiddle is where the function to remove an object from the array is made.
I tried to use indexOf and splice Array functions on line 68 and 69 and it worked to remove but the DOM was not being updated.
Please take a look at the function removeProduct: function (product)
Html
<div>List of Product (<span data-bind="text: products().length"></span>)
</div>
<ul data-bind="foreach: products">
<li><span data-bind="text:name"></span>
Select
</li>
</ul>
<div>List of Group Ideas</div>
<ul data-bind="foreach: GroupIdeas">
<li data-bind="text:name">
<input type="button" value="Removethis" />
<input type="button" value="vote" />
</li>
</ul>
<div>List of Group members</div>
</body>
Javascript
$(function () {
var viewModel = {
productPrice: ko.observable(89),
productQty: ko.observable(2),
products: ko.observable([
{ name: "shoe", price: "788", id: 1 },
{ name: "blouse", price: "50", id: 2 },
{ name: "dress", price: "16", id: 3 },
{ name: "lipstick", price: "88", id: 4 },
{ name: "earring", price: "4", id: 5 },
{ name: "bra", price: "96", id: 6 },
{ name: "lingeringe", price: "48", id: 7 },
{ name: "neclace", price: "36", id: 8 },
]),
GroupIdeas: ko.observable([
{ name: "shoe", price: "788", prodId: 1, selectedby: "Akuba", memId:
1, votes: 3 },
{ name: "lingeringe", price: "48", prodId: 7, selectedby: "Isaac",
memId: 2, votes: 6 },
]),
GroupMember: ko.observable([
{ name: "Akuba", relation: "friend", id: 1 },
{ name: "Isaac", relation: "Husband", id: 2 },
{ name: "Ira", relation: "Sister", id: 3 },
{ name: "Davida", relation: "Mum", id: 4 }
]),
partyPerson: ko.observable("Ida"),
partyOrganiser: ko.observable("Royce"),
//addProduct = function () { /* ... leave unchanged ... */ }
removeProduct: function (product) {
/*var indexArr = viewModel.products().indexOf(product);
viewModel.products().splice(indexArr, 1)
*/
viewModel.products().remove(product)
console.log(product);
}
};
viewModel.totalAmt = ko.computed(function () {
return this.productPrice() * this.productQty();
}, viewModel);
ko.applyBindings(viewModel);
//ko.applyBindings(giftModel);
})**

Here's your updated fiddle.
You need to make products an observable array to take advantage of the remove function.
You need to make a reference to the viewmodel before you can refer to products, so your removeProduct function has to be written after the viewmodel initialisation. Similar to how you have written totalAmt.
viewModel.removeProduct = function (product) {
viewModel.products.remove(function(item){
return item.id === product.id;
});
}

Related

How to validate select2?

I have a select2 as below:
<select class="form-select" id="ds" name="ds" tabindex="1" required></select>
I populate it using:
var data = [{ id: "0", text: "" }, { id: "1", text: "List" }, { id: "2", text: "Tags" }];
$('#ds').select2({
data: data
})
I try to validate it using below, but it's not working, what did I do wrong?
$form.each(function() {
var $this = $(this);
$this.validate({
rules: {
data_source: {
required: true
}
},
messages: {
data_source: {
required: 'Data source field is required'
}
}
});
});

how do you drag the columns with element-ui-el-table-draggable, Element UI?

I am using the plugin: https://github.com/WakuwakuP/element-ui-el-table-draggable
but I only see an example to drag the fields.
<el-table-draggable handle=".handle">
<el-table :data="tableData" :header-cell-class-name="headerRow">
<div class="handle">
<el-table-column prop="date" label="Fecha" class="handle">
<template slot-scope="scope">
<!-- <div class="handle"> -->
<label class="text-thicker">{{ scope.row.date}}</label>
handle
<!-- </div> -->
</template>
</el-table-column>
</div>
<el-table-column prop="name" label="Name">
<template slot-scope="scope">
<div>
<label class="text-thicker">{{ scope.row.name}}</label>
handle
</div>
</template>
</el-table-column>
</el-table>
</el-table-draggable>
and in the model I have it like this:
data() {
return {
tableData: [{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}],
}
}
I am applying the handle class to a div that encloses but it doesn't work for me, how can I drag the columns?
this works for me
<el-table border :data="tableData" size="mini" >
<el-table-column
v-for="(item, index) in elTheadList"
:prop="dataTheadList[index]"
:label='item'
:key="`thead_${index}`"
>
</el-table-column>
</el-table>
data() {
return {
tableData: [{
date: '2016-05-01',
name: 'Cristian Millan',
address: 'Baja #11'
},{
date: '2016-05-02',
name: 'Jorge Cabrera',
address: 'Progreso #18'
},{
date: '2016-05-03',
name: 'Armando Mendivil',
address: 'Novena #12'
}],
dataTheadList: [
'date',
'name',
'address'
],
elTheadList: ['Date', 'Name', 'Address'],
}
},
mounted() {
const el = document.querySelector('.el-table__header-wrapper tr')
this.sortable = Sortable.create(el, {
animation: 180,
delay: 0,
onEnd: evt => {
const oldItem = this.dataTheadList[evt.oldIndex]
this.dataTheadList.splice(evt.oldIndex, 1)
this.dataTheadList.splice(evt.newIndex, 0, oldItem)
}
})
}

select2 loading array data example not working

The loading array data example from the official documenation is just not working for me.
https://jsfiddle.net/Jngai1297/v64rwj7b/7/
html
<select class="js-example-data-array-selected">
<option value="2" selected="selected">duplicate</option>
</select
javascript
var hidata = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
$(".js-example-data-array").select2({
data: hidata
})
$(".js-example-data-array-selected").select2({
data: hidata
})
The examples are straight out from the doc and the external resources are correct as well. Been hacking on it half the day and searched around and found nothing.
$(document).ready(function() {
var airPorts = [
{id:0,text:'airport one'},
{id:1,text:'airport two'},
{id:2,text:'airport three'},
{id:3,text:'airport four'},
];
$('.select2').select2({
data: airPorts,
});
});

Custom pagination page size selector in UI-GRID?

I am wondering if it is possible to customize pagination page size in Angular Ui Grid? I was looking for it in the documentation, however, I was not able to find any information about it.
The problem I have is that when I'am trying to use :
<select ng-model="gridApi.grid.options.paginationPageSize">
<option>5</option>
<option>10</option>
<option>20</option>
<option>25</option>
</select>
And when angular compile it, there is an extra option added to the Html (I guess from ng-model):
<option value="? number:20 ?"></option>
Any ideas?
Thanks
This seems to work for me:
var app = angular.module('app', ['ui.bootstrap', 'ui.grid', 'ui.grid.pagination']);
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.data = [
{ name: 'Alex', car: 'Toyota' },
{ name: 'Sam', car: 'Lexus' },
{ name: 'Joe', car: 'Dodge' },
{ name: 'Bob', car: 'Buick' },
{ name: 'Cindy', car: 'Ford' },
{ name: 'Brian', car: 'Audi' },
{ name: 'Malcom', car: 'Mercedes Benz' },
{ name: 'Dave', car: 'Ford' },
{ name: 'Stacey', car: 'Audi' },
{ name: 'Amy', car: 'Acura' },
{ name: 'Scott', car: 'Toyota' },
{ name: 'Ryan', car: 'BMW' },
{ name: 'Brad', car: 'Chevrolet' },
{ name: 'Leonard', car: 'Ford' },
{ name: 'Chris', car: 'Dodge' },
{ name: 'Brett', car: 'Hyundai' },
{ name: 'Jim', car: 'Kia' },
{ name: 'Fred', car: 'Nissan' },
{ name: 'Todd', car: 'Volkswagen' },
{ name: 'Gregory', car: 'Audi' },
{ name: 'Martin', car: 'BMW' },
{ name: 'Lisa', car: 'Vauxhall' },
{ name: 'Megan', car: 'Renault' },
{ name: 'Audrey', car: 'Citroen' },
{ name: 'Janelle', car: 'Pugeot' },
{ name: 'Jaquelin', car: 'Lada' },
{ name: 'Rosa', car: 'Mitsubishi' },
{ name: 'Naomi', car: 'Saturn' },
{ name: 'Brittany', car: 'BMW' },
{ name: 'Tracy', car: 'Cadillac' },
{ name: 'Chloe', car: 'Hummer' },
{ name: 'Augustus', car: 'Mercedes Benz' },
{ name: 'Lauren', car: 'Porsche' },
{ name: 'Howard', car: 'Subaru' },
{ name: 'Stan', car: 'Plymouth' },
{ name: 'Kyle', car: 'Honda' },
{ name: 'Kenny', car: 'Suzuki' },
{ name: 'Eric', car: 'Holden' },
{ name: 'Randy', car: 'Chrysler' },
];
$scope.numRows = 10;
$scope.rowHeight = 30;
$scope.headerRowHeight = 30;
$scope.gridOptions = {
data: 'data',
totalItems: $scope.data.length,
minRowsToShow: 5,
enablePaginationControls: false,
paginationCurrentPage: 1,
paginationPageSize: 10,
paginationPageSizes: [5, 10, 15, 20],
columnDefs: [
{name: 'name'},
{name: 'car'}
]
};
}]);
<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="bootstrap-css#3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script data-require="ui-bootstrap#0.13.3" data-semver="0.13.3" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap-tpls.min.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css" />
</head>
<body>
<div ng-controller="MainCtrl">
<div ui-grid="gridOptions" ui-grid-pagination="" ng-style="getTableStyle()"></div>
<div class="text-center" ng-show="gridOptions.totalItems > numRows">
<pagination class="pagination-sm" total-items="gridOptions.totalItems" items-per-page="gridOptions.paginationPageSize" ng-model="gridOptions.paginationCurrentPage"></pagination>
</div>
<select ng-model="gridOptions.paginationPageSize" ng-options="o as o for o in gridOptions.paginationPageSizes"></select>
</div>
<script src="app.js"></script>
</body>
</html>

Angular UI Grid not updating directives in cells

I have a ui grid that contains a directive, this directive has an isolated scope and changes it's template basing on some logic.
The problem is that, when sorting (and also when PAGING), the 'logic' of the directive seems to not be correctly "re-evaluated".
In the specific example, the rightmost column should only see some "11" while if you try to sort by id (or the other fields) you'll see some spurios '0' appearing.
this is the ui:
<div ng-app="myapp">
<div ng-controller="myctrl">
<div ui-grid="gridOptions" ng-style="gridStyle"></div>
</div>
</div>
this is the js:
var myapp = angular.module('myapp', ["ngRoute", "ui.grid"])
.controller('myctrl', function($scope) {
$scope.gridOptions = {
data: [{
id: 1,
name: "Max",
other: "pippo",
number: 1
}, {
id: 2,
name: "Adam",
other: "pluto",
number: 0
}, {
id: 3,
name: "Betty",
other: "paperino",
number: 0
}, {
id: 4,
name: "Sara",
other: "fava",
number: 1
}, {
id: 5,
name: "Favonio",
other: "favona",
number: 1
}],
columnDefs: [{
field: "id",
displayName: "ID"
}, {
field: "name",
displayName: "Name"
}, {
field: "other",
displayName: "Other"
}, {
field: "number",
cellTemplate: '<div class="ui-grid-cell-contents"><mydir data="row.entity"></mydir></div>'
}]
};
}).directive("mydir", function() {
return {
restrict: 'E',
scope: {
data: "=",
},
template: '<div><label ng-if="data.number==1">{{set}}</label></div>',
link: function(scope, iElement, iAttrs) {
scope.set = -1;
if (scope.data.number == 0) {
scope.set = 00;
} else {
scope.set = 11;
}
}
}
});
and here's a fiddle:
https://jsfiddle.net/27yrut4n/
Any hint?
In the end it's a known bug:
https://github.com/angular-ui/ui-grid/issues/4869
And I solved using watch like it's said here:
Directive rendered via UI-Grid cellTemplate rendering incorrectly

Resources