knockout js: data-bind click not working - javascript

I cannot get a simple button click to fire a logMyStuff knockout function in my website. Notice i have added a <button>, <a>, and <div> to try and make it work. I have made a js fiddle of it but the js fiddle worked.
Here is my code:
var SearchFilterViewModel = (function () {
function SearchFilterViewModel() {
this.logMyStuff = function () {
console.log("stuff");
};
this._categoryID = 1;
this._categories = ko.observableArray([
new Category("Vegan Meat", 1),
new Category("Vegan Dairy", 2),
new Category("Confectionary", 3),
new Category("Baking", 4),
new Category("Restaurants", 5),
new Category("Fashion", 6)
]);
this._regionGetter = new AreaGetter();
this._townGetter = new AreaGetter();
this._regionGetter.getAreas("2186224");
this._regionGetter._selectedArea.subscribe(this._townGetter.getAreas.bind(this._townGetter));
}
return SearchFilterViewModel;
})();
$(document).ready(function () {
var _searchFilterViewModel = new SearchFilterViewModel();
var _searchFilterForm = $("#find-vegan-products-page").find("form")[0];
ko.applyBindings(_searchFilterViewModel, _searchFilterForm);
});
HTML:
<div id="find-vegan-products-page" class="full-size container-fluid" style="height:900px; padding: 70px 40px 40px 40px;">
<!-- TODO: Make blackand white video section a bit shorter -->
<h1 style="margin:0px 0px 20px 0px; color: dimgray;">FILTER YOUR SEARCH</h1>
<button style="width:100px;height:100px;" data-bind="click: logMyStuff"></button>
<a style="width:100px;height:100px;" data-bind="click: logMyStuff"></a>
<div style="width:100px;height:100px;" data-bind="click: logMyStuff"></div>
<form role="form">
<div class="row">
<?
echo RegionSelect::display();
echo TownSelect::display();
//echo CategorySelect::display();
?>
</div>
<div class="row">
<div class="col-sm-12">
<div id="go-button"
class="with-border clickable"
href="#find-vegan-products-page" >
<h5 class=" text-center medium-text">GO</h5>
</div>
</div>
</div>
</form>
</div>

That's because the root node you defined in your applyBinding() is the <form>, while your <button>, <a> and <div> that are calling logMyStuff() are outside of that form.
Try this instead:
var _searchFilterRoot = $("#find-vegan-products-page")[0];
ko.applyBindings(_searchFilterViewModel, _searchFilterRoot);

Related

Load More Button JS - Load new content on page

I'm trying to develop a Load-More button using Javascript calling an API done with PHP.
So far, so good. I can load the new objects in a range i += i + 4 (I load three new comments everytime I press the button).
This is my load-more button:
$(document).ready(function () {
$(".load-more").on('click', function () {
var tab = $(this).data('tab');
var next_page = $(this).data('next-page');
console.log(next_page);
console.log(tab);
$.get($(this).data('url') + '?tab=' + tab + '&page=' + next_page, function (data) {
addNewQuestions($.parseJSON(data));
});
});
});
And for every object loaded I want to print each of these html blocks.
<div class="question-summary narrow">
<div class="col-md-12">
<div class="votes">
<div class="mini-counts"><span title="7 votes">
{if $question['votes_count']}
{$question['votes_count']}
{else}
0
{/if}
</span></div>
<div>votes</div>
</div>
<div {if $question['solved_date']}
class="status answered-accepted"
{else}
class="status answer-selected"
{/if}
title="one of the answers was accepted as the correct answer">
<div class="mini-counts"><span title="1 answer">{$question['answers_count']}</span></div>
<div>answer</div>
</div>
<div class="views">
<div class="mini-counts"><span title="140 views">{$question['views_counter']}</span></div>
<div>views</div>
</div>
<div class="summary">
<h3>
<a href="{questionUrl($question['publicationid'])}" class="question-title" style="font-size: 15px; line-height: 1.4; margin-bottom: .5em;">
{$question['title']}
</a>
</h3>
</div>
<div class = "statistics col-sm-12 text-right" style="padding-top: 8px">
<span>
<i class = "glyphicon glyphicon-time"></i>
<span class="question-updated-at">{$question['creation_date']}</span>
</span>
<span>
<i class = "glyphicon glyphicon-comment"></i>
<span class="question-answers">{$question['answers_count']}</span>
</span>
</div>
</div>
</div>
The problem is that I have several conditions, as {if$question['votes_count']} and I'm struggling because I don't know how get those variables when rendering the html.
Then I found something but I can't figure out how to adapt to my case
On that addNewQuestions I think that a good approach would be:
function addNewQuestions(objects) {
$.each(objects, function (i, object) {
console.log(object);
var lastItem = $('div.active[role="tabpanel"] .question-line:last');
var newLine = lastItem.clone(true);
var newObject = newLine.find('.question-col:eq(' + i + ')');
newObject.find('.question-info-container').attr('data-id', object.publicationid);
newObject.find('.vote-count').html(object.votes);
updateTitleAndLink(newObject.find('.question-title'), object);
lastItem.after(newLine);
});
}
function updateTitleAndLink(questionTitle, object) {
questionTitle.attr('href', questionTitle.data('base-question-url') + object.publicationid);
questionTitle.html(object.title);
}
But nothing happens and I can't figure out why.
Any idea or suggestion?
Kind regards

Angular1.5.8, the component does not work

<div ng-app="myApp" ng-controller="controller" class="cell-list-box">
<div >
<button ng-click="changeArrayFun(1)">array1Button</button>
<button ng-click="changeArrayFun(2)">array2Button</button>
</div>
<ul class="cell_list_ul">
<li ng-repeat="item in show_array" class="cell_list">
<div class="course_cell">
<div class="img_box">
<a ng-if="item.course != 'course'&&item.coursetype ==1 "
target="_blank">
<div style="background-color: yellow; width: 20px; height: 20px" ></div>
</a>
<a ng-if="item.works_oldid"
target="_blank">
<div style="background-color: red; width: 20px; height: 20px" ></div>
</a>
</div>
</div>
</li>
</ul>
</div>
<script src="../angular.js"></script>
<script>
var ngmodule = angular.module('myApp',[]);
ngmodule.controller('controller', ['$scope', function ($scope) {
var array1 = [
{
"type":"coursewarp",
"coursetype":1,
},
];
var array2 = [
{
"ID":3194892,
"courseid":"0",
"taskid":34,
"works_oldid":"585be116e9c7a87881571958",
}
];
$scope.changeArrayFun = function (number) {
if(number === 1){
$scope.show_array = array1;
} else {
$scope.show_array = array2;
}
}
}]);
</script>
If I write all the code in my HTML. When I click the Button1, the yellow box will show. When I click the Button2, the red box will show. The code work well.I use the Angular component to write a "cell" component. IF I insert the cell code into the "cell" component, the code does not work.
The component templateUrl :
<div class="course_cell">
<div class="img_box">
<a ng-if="item.course != 'course'&&item.coursetype ==1 "
href="{{root_path}}/libs/v1/column/column.html?wrap_id={{item.wrap_id}}"
target="_blank">
<div style="background-color: yellow; width: 20px; height: 20px" ></div>
</a>
<a ng-if="item.works_oldid"
target="_blank">
<div style="background-color: red; width: 20px; height: 20px" ></div>
</a>
</div>
</div>
my component js ( test_cell.js ) :
function courseCellFactoryFun( app_name, root_path,api_set ) {
function courseCellComponentFun() {
var ctrl = this;
console.log(ctrl.cellData);
}
angular.module(app_name).component('courseCell', {
templateUrl:root_path + '/test_cell.html',
controller:courseCellComponentFun,
bindings:{
cellData:'='
}
})
}
The body will change :
<ul class="cell_list_ul">
<li ng-repeat="item in show_array" class="cell_list">
<course-cell cell-data="item"></course-cell>
</li>
</ul>
I add the code below at the end of the body.
<script src="./testCell/test_cell.js"></script>
<script>
courseCellFactoryFun('myApp','./testCell');
</script>
testCell is my component folder.
Then I run the demo, when I click the button, the colorBox does not show.
The default naming of a controller in a component in Angular 1.5+ is '$ctrl' so you must prefix this when accessing data and functions from your template e.g. :
<div class="course_cell">
<div class="img_box">
<a ng-if="$ctrl.item.course != 'course' && $ctrl.item.coursetype ==1 "
...

Check if all dynamic radio buttons are checked before submit

i am not much sure how can i check if all my dynamic radio button that came from DB are checked before i submit my form.
I am working on a Booking Project, and the clue is about food package and subpackage. Based on the package the client choose, than he will check like a radio button which dish does he want before submitting and going to booking view.
If not all the product are selected (1 for each category) the form can not be submit.My view:
{!! Form::open(array('route' => ['continue_pacakage_booking',$sub_package->id],'id' => 'form','class'=>'form-horizontal','novalidate' => 'novalidate','role' => 'form', 'enctype' => 'multipart/form-data', 'onsubmit' => "validateForm()")) !!}
#foreach($dishes_and_categories as $key=>$dishes_and_category)
<section style="padding: 70px 50px">
<div class="container"style="border-bottom: 10px solid #F0F0F0" >
<div class="row">
<!-- section title -->
<div class="col-md-12 text-center">
<span class="title-small text-uppercase letter-spacing-3 font-weight-600" style=" color: #da7e57;">{{$dishes_and_category['category_name']}}</span>
<div class="separator-line-thick bg-black no-margin-bottom margin-one xs-margin-top-five"></div>
</div>
<!-- end section title -->
</div>
<section class="wow fadeIn blog-details-text" style="padding-top: 30px;padding-bottom: 30px">
<div class="container">
#foreach($dishes_and_category['dishes'] as $dish)
<div class="col-md-4 col-sm-6">
<label>
<input type="radio" #if($dishes_and_category['id_category'] == 6) disabled #endif name="{{$dishes_and_category['id_category']}}" value="{{$dish->id}}" />
<img src="http://develop.almotech.org/restaurant/restaurant_panel/public/attachment/dishes/{{$dish->image}}" style="border-radius: 50%;height: 250px;width: 100%">
<p style="text-align: center; font-weight: bold" class="text-uppercase">{{$dish->name}}</p>
</label>
</div>
#endforeach
</div>
</section>
</div>
</section>
#endforeach
<div class="col-md-12">
<button class="highlight-button btn btn-large btn-round button xs-margin-bottom-five" type="submit" id="select_table" name="select_table" style="margin-left: 805px; width: 278px; margin-bottom: 20px">Continua Prenotare</button>
</div>
{!! Form::close() !!}
and my controller :
public function show($id)
{
$sub_package = Sub_Packages::find($id);
$id_package = $sub_package->id_package;
$selected_categories = DB::select('SELECT c.id as id_category , c.name as category_name FROM sub_packages_dishes s LEFT JOIN packages_menu_categories c ON s.id_package_menu_category = c.id WHERE s.id_sub_package = '.$id.' GROUP BY s.id_package_menu_category');
$dishes_and_categories = array();
foreach ($selected_categories as $selected_category)
{
$dishes = DB::select('SELECT s.id AS id_pmcd , d.id , d.name ,d.image FROM `sub_packages_dishes` s LEFT JOIN `dishes` d ON s.id_dish = d.id WHERE s.id_sub_package ='.$id.' AND s.id_package_menu_category ='.$selected_category->id_category);
$object=
[
'id_category' => $selected_category->id_category,
'category_name' =>$selected_category->category_name,
'dishes' => $dishes
];
array_push($dishes_and_categories,$object);
}
return view('package.view_sub_package',['id_package' =>$id_package ,'sub_package' =>$sub_package,'dishes_and_categories' =>$dishes_and_categories]);
}
You can use a combination of jQuery functions (not - http://api.jquery.com/not/, has - http://api.jquery.com/has/) to help you on this.
if ($('#testForm:not(:has(:radio:checked))').length) {
alert('Not all checked');
}
This is an example http://codepen.io/ltong/pen/dOLmoa I created.
You need to change the name of you buttons form.
name="{{$dishes_and_category['id_category']}}
To
name="buttons[{{$dishes_and_category['id_category']}}]"
Then you can simply do a foreach on the
In the controller request->input('buttons');
Or a foreach in the javascript
var radios = document.getElementsByName( buttons);
for( i = 0; i < radios.length; i++ ) {
if( radios[i].checked ) {
do somthing
}
}

How can I Add/Edit on same page in Angular

There are two types of data I'm displaying on single page, one is Insert form and second is where the data is displayed with the help of Angular dataTables, now what I want to do is when I click on Edit I wana display the Data within the Insert form Fields also change the Save button from Save to Update... I've tried it but I'm getting this error although its displaying the data in console.
controller.js:1356 24
controller.js:1363 Colony 02 2
angular-1.4.8.js:12520 TypeError: Cannot set property 'colony_name' of undefined
NOTE: Insert, Delete, Displaying Data is working fine.
Here is my HTML PAGE
<div class="row-fluid" ng-controller="colony_Controller">
<div class="span12">
<div class="span6">
<!-- WIDGET START -->
<div class="widget TwoWidgetsInOneFix">
<!-- Widget Title Start -->
<div class="widget-title">
<h4><i class="icon-reorder"></i>Add Colony</h4>
<span class="tools">
<!-- -->
</span>
</div>
<!-- Widget Title End -->
<!-- Widget Body Start -->
<div class="widget-body">
<form class="form-horizontal">
<div class="control-group">
<div class="small-bg-half">
<label class="control-label">Colony Name</label>
<div class="controls">
<input type="text" class="input-xlarge" id="" autofocus required name="colony_name"
ng-model="field.colony_name" > <!-- ng-->
<span class="help-inline" id="help-inline" style="color:red;"></span>
</div>
</div>
</div>
<div class="control-group">
<div class="small-bg-half">
<label class="control-label">Colony Type</label>
<div class="controls">
<select data-toggle="status" class="select select-default mrs mbm input-xlarge" name="colony_type" id="colony_type" ng-model="field.colony_type_id" required> <!-- ng -->
<option value="">--Select Colony Type--</option>
<option ng-repeat="colony in es_colony_type" value="{{colony.es_colony_type_id}}">{{colony.es_colony_type_name}}</option>
</select>
</div>
</div>
</div>
<div class="form-actions">
<button type="button" class="btn btn-success" ng-click="InsertData()"> <!-- ng -->
<i class="icon-plus icon-white"></i> Save</button>
</div>
</form>
</div>
<!-- Widget Body End -->
</div>
<!-- WIDGET END -->
</div>
<div class="span6">
<!-- WIDGET START -->
<div class="widget TwoWidgetsInOneFix">
<!-- Widget Title Start -->
<div class="widget-title"> <!-- ng -->
<h4><i class="icon-reorder"></i>List Of Colony</h4>
<span class="tools">
<!-- -->
</span>
</div>
<!-- Widget Title End -->
<!-- <div id="alert-2" flash-alert active-class="in alert" class="fade">
<strong class="alert-heading">Boo!</strong>
<span class="alert-message">{{flash.message}}</span>
</div> -->
<!-- Widget Body Start -->
<div class="widget-body">
<div ng-controller="colony_Controller as Main_Module">
<table class="table table-striped table-bordered" align="center" datatable="" dt-options="Main_Module.dtOptions" dt-columns="Main_Module.dtColumns" class="row-border hover">
</table>
</div>
</div>
</div>
<!-- Widget Body End -->
</div>
<!-- WIDGET END -->
</div>
Here is my Controller
Main_Module.controller('colony_Controller', function add_house_Controller(flash, $window, $scope, $http, $compile, DTOptionsBuilder, DTColumnBuilder, bootbox, SimpleHttpRequest, DelMainRecPicRecUnlinkPic, message)
{
$http.get('http://localhost:3000/api/SELECT/es_colony_type').success(function(data)
{
$scope.es_colony_type = data.es_colony_type;
});
/********************************** FETCH DATA END *********************************/
/********************************** INSERT DATA START ********************************/
$scope.InsertData = function()
{
var values = $scope.field;
SimpleHttpRequest.Insert('POST','INSERT', 'es_colony', values)
.then(function successCallback(response)
{
if(!response.data.Error)
{
message.successMessageForInsert("<strong>Successfull !</strong> Colony Details Inserted");
setTimeout(function()
{
$window.location.reload();
}, 3500);
// flash.to('alert-1').success = 'Only for alert 1';
}
else
{
message.failedMessageForInsert("<strong>Error !</strong> Data Insertion Failed");
}
},
function errorCallback(response)
{
message.failedMessageForInsert("<strong>Error!</strong> Data Insertion Failed !");
});
};
/********************************** INSERT DATA END **********************************/
/********************************** DISPLAY DATA START *******************************/
var vm = this;
vm.dtOptions = DTOptionsBuilder
.fromFnPromise(function()
{
return $http.get('http://localhost:3000/api/SELECT/es_colony')
.then(function(response)
{
return response.data.es_colony;
});
})
.withOption('order', [0, 'asc'])
.withDisplayLength(5)
.withPaginationType('simple_numbers')
.withOption('createdRow', function(row, data, dataIndex)
{
$compile(angular.element(row).contents())($scope);
})
vm.dtColumns =
[
DTColumnBuilder.newColumn('es_colony_name').withTitle('Colony'),
DTColumnBuilder.newColumn(null).withTitle('Actions').notSortable().withOption('width', '31%')
.renderWith(function(data, type, full, meta)
{
return '<button class="btn btn-primary" ng-click="edit_records(' + data.es_colony_id + ')">' +
'<i class="icon-edit"></i> Edit' + '</button> ' +
'<button class="btn btn-danger" ng-click="DeleteRecord(' + data.es_colony_id + ')">' +
'<i class="icon-remove icon-white"></i> Delete' + '</button>';
})
];
/********************************** DISPLAY DATA END *********************************/
/********************************** DELETE DATA START ********************************/
// $scope.hideRow = [];
$scope.DeleteRecord = function(id)
{
bootbox.confirm("Are you sure you want to delete this Record ?", function (confirmation)
{
if(confirmation)
{
DelMainRecPicRecUnlinkPic.DeleteIt('', id, true, 'es_colony', 'es_colony_id')
{
setTimeout(function()
{
$window.location.reload();
}, 3500);
};
}
});
};
$scope.edit_records = function(id)
{
// PassId.id = id;
console.log(id);
SimpleHttpRequest.SelectByID('GET', 'SELECTBYID', 'es_colony', 'es_colony_id', id)
.then(function successCallback(response)
{
var data = response.data.es_colony[0];
console.log(data.es_colony_name, data.es_colony_type_id);
$scope.ufield.ucolony_name = data.es_colony_name;
$scope.ufield.colony_type_id = data.es_colony_type_id;
});
};
/********************************** DELETE DATA END **********************************/
});
In your template, you have an input with ng-model="field.colony_name", but in your controller you never defined $scope.field. You do assign the value var values = $scope.field inside the $scope.InsertData function, but that will just set values to undefined.
Try initializing the variable by adding $scope.field = {} to the beginning of your controller, for starters. That will resolve the error you are getting.
Here is the code that may help you.
Html:
<div ng-app="myApp" ng-controller="MainCtrl">
<fieldset data-ng-repeat="choice in choices">
<input type="text" ng-model="choice.name" name="" placeholder="Enter mobile number"> <button class="remove" ng-show="$last" ng-click="removeChoice()">-</button>
</fieldset>
<button class="addfields" ng-click="addNewChoice()">Add fields</button>
<div id="choicesDisplay">
{{ choices }}
</div>
</div>
Js:
var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope) {
$scope.choices = [{id: 'choice1'}, {id: 'choice2'}];
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length+1;
$scope.choices.push({'id':'choice'+newItemNo});
};
$scope.removeChoice = function() {
var lastItem = $scope.choices.length-1;
$scope.choices.splice(lastItem);
};
});
Also CSS:
fieldset{
background: #FCFCFC;
padding: 16px;
border: 1px solid #D5D5D5;
}
.addfields{
margin: 10px 0;
}
#choicesDisplay {
padding: 10px;
background: rgb(227, 250, 227);
border: 1px solid rgb(171, 239, 171);
color: rgb(9, 56, 9);
}
.remove{
background: #C76868;
color: #FFF;
font-weight: bold;
font-size: 21px;
border: 0;
cursor: pointer;
display: inline-block;
padding: 4px 9px;
vertical-align: top;
line-height: 100%;
}
input[type="text"],
select{
padding:5px;
}
Html
<div ng-app="albumShelf">
<div ng-controller="MainCtrl">
<div style="float:left;">
<select ng-options="b.title for b in albums" ng-model="currentAlbum" ng-change="onChange()">
<option value="">New album...</option>
</select>
</div>
<div style="float:left;">
<form>
<input type="text" ng-model="editing.title">
<br>
<input type="text" ng-model="editing.artist">
<br>
<input type="submit" value="{{ currentAlbum.title ? 'Update' : 'Save' }}" ng-click="addOrSaveAlbum()">
</form>
</div>
</div>
</div>
Js:
var app= angular.module('myApp', [])
.controller('MainCtrl', ['$scope', function($scope/*, albumFactory*/) {
$scope.editing = {};
$scope.albums = [
{ id: 1, title: 'Disorganized Fun', artist: 'Ronald Jenkees' },
{ id: 2, title: 'Secondhand Rapture', artist: 'MS MR' }
];
$scope.addOrSaveAlbum = function() {
if ($scope.currentAlbum) {
$scope.currentAlbum.title = $scope.editing.title;
$scope.currentAlbum.artist = $scope.editing.artist;
}else {
$scope.albums.push({ title: $scope.editing.title, artist: $scope.editing.artist });
}
$scope.editing = {};
};
$scope.onChange = function() {
if ($scope.currentAlbum) {
$scope.editing.title = $scope.currentAlbum.title;
$scope.editing.artist = $scope.currentAlbum.artist;
}else {
$scope.editing = {};
}
};
}])

Filter Data Using Knockout JS

I have static array that have 2 set of data.
I have make 2 part of the one div and on right side show all list from array and on left side nothing.
On right side have put + sign on button, on it's click that record came on left side div and working fine and at that time the plus sign become minus when that record came on left side, when click on minus sign again that record removed from left side. Just like toggle.
Now I want to filter the right side of list using textbox.
It will search on 2 columns i.e. code and title.
but how to make filter I don't know.
HTML Code :
<div class="col-md-6">
<div class="col-md-4">
<input type="text" required id="filterD" class="form-control" data-bind=""/>
</div>
<!-- ko foreach: controlFields -->
<div class="row">
<div class="col-md-11 table-bordered">
<div class="form-group" style="padding-top: 3px;">
<div class="col-md-2" data-bind="text:code">
</div>
<div class="col-md-7" data-bind="text:title">
</div>
<div class="col-md-1" data-bind="text:i1">
</div>
<div class="col-md-1" data-bind="text:i2">
</div>
<div>
<!-- ko ifnot : viewFlag -->
<button class="btn-primary btn-xs" data-bind="click: $root.addField">
<i class="glyphicon glyphicon-plus-sign"></i>
</button>
<!-- /ko -->
<!-- ko if : viewFlag -->
<button class="btn-primary btn-xs" data-bind="click: $root.removeField">
<i class="glyphicon glyphicon-minus-sign"></i>
</button>
<!-- /ko -->
</div>
</div>
<!-- ko foreach: subFields -->
<div style="padding-top: 3px" class="form-group" data-bind="attr:{'title':description()}">
<div class="col-md-2">
</div>
<div style="border-top: 1px solid #ddd; " class="col-md-2" data-bind="text:code">
</div>
<div style="border-top: 1px solid #ddd; " class="col-md-7" data-bind="text:title">
</div>
<div>
<button class="btn-primary btn-xs"><i class="glyphicon glyphicon-plus-sign"></i></button>
</div>
</div>
<!-- /ko -->
</div>
</div>
<br />
<!-- /ko -->
</div>
JavaScript :
var exports = {},
ViewModel, ControlField , SubField;
SubField = function(code, title,data,description){
var self = this;
self.code = ko.observable(code);
self.title = ko.observable(title);
self.data = ko.observable(data);
self.description = ko.observable(description);
};
ControlField = function(code, title, i1, i2){
var self = this;
self.code = ko.observable(code);
self.title = ko.observable(title);
self.i1 = ko.observable(i1);
self.i2 = ko.observable(i2);
self.subFields = ko.observableArray([]);
self.viewFlag = ko.observable(false);
};
ViewModel = function(data) {
var self = this;
self.controlFields = ko.observableArray([]);
var controlField = new ControlField("100","BookTitle","0","1");
self.controlFields.push(controlField);
controlField.subFields().push(new SubField("a","Title","JAVA","For Entering Item Title Data"));
controlField.subFields().push(new SubField("p","Section","2","For Section"));
var controlField1 = new ControlField("245","Author","1","0");
self.controlFields.push(controlField1);
controlField1.subFields().push(new SubField("a","Name","Herbert","Name of The Author"));
controlField1.subFields().push(new SubField("d","Place","Ontario","Place of Author"));
self.addField = function(field){
field.viewFlag(true);
};
self.removeField = function(field){
field.viewFlag(false);
};
};
I want that when I type any character in input=text it will filter data and then show.
Any suggestion on this.
Here's Screen of this code :
You can use ko.computed for filtering the data.
//filter html binding
<input type="text" required id="filterD" class="form-control" data-bind="value:filter,valueUpdate: 'keyup'" />// use valueUpdate binding
//bind filter to filter text
self.filter = ko.observable();
//Use filteredList in html binding instead of controlFields
self.filteredList = ko.computed(function () {
var filter = self.filter(),
arr = [];
if (filter) {
ko.utils.arrayForEach(self.controlFields(), function (item) {
if (item.code() == filter || item.title() == filter) {
arr.push(item);
}
});
} else {
arr = self.controlFields();
}
return arr;
});
Fiddle Demo
//sorry for ui part(Html alignment) in demo.

Categories

Resources