I am using in my application angular.js and html. So, I would like to autocomplete a textbox,but only when the length of the field "UserSearch" is greater than 3.
MY HTML
<div class="col-sm-8">
<div class="input-group">
<input data-ng-model="UserSearch" ng-change="selectSearchType(UserSearch)" list="title" type="text" class="form-control" placeholder="Name to search">
<span class="input-group-btn">
<button class="btn btn-primary" type="button"><i class="glyphicon glyphicon-search"></i></button>
</span>
<datalist id="{{test}}">
<option data-ng-repeat=" user in AllUser" value="{{user.name}}">
</datalist>
</div>
</div>
MY JS
$scope.test = "";
$scope.selectSearchType = function (UserSearch) {
if (UserSearch.length > 3) {
$scope.test = "title";
$http.get("/api/getAllUser?SearchUser=" + UserSearch).success(function (data) {
$scope.AllUser = data;
})
}
else {
$scope.test = "";
}
}
I still have the same problem.. When i type a name in the field, two names appears in the datalist, but when I click on the triangle on the top of the texbox, all data appears... What can I do to fix this problem ?
If you're using the HTML5 datalist, then in essence you're rolling your own autocomplete.
What I would recommend, is to create a directive that encapsulates your above code.
So this:
<div class="input-group">
<input data-ng-model="UserSearch" ng-change="selectSearchType(UserSearch)" list="title" type="text" class="form-control" placeholder="Name to search">
<span class="input-group-btn">
<button class="btn btn-primary" type="button"><i class="glyphicon glyphicon-search"></i></button>
</span>
<datalist id="{{test}}">
<option data-ng-repeat=" user in AllUser" value="{{user.name}}">
</datalist>
</div>
Turns into this:
<autocomplete
search="UserSearch"
on-select="selectSearchType"
min-search="3"
list="user in AllUser">
</autocomplete>
The basic directive looks like this:
var app = // get your angular module
app.directive('autocomplete', function () {
return {
replace: true,
restrict: 'E',
scope: {
search: "=",
minSearch: "=",
list: "=",
onSelect: "="
},
templateUrl: 'template/autocomplete-template.html', // use the above template
link: function (scope, el, attrs) {
scope.$watch('UserSearch', function() {
if(scope.search.length > scope.minSearch) {
// this onSelect function will callback
// into your controller
scope.onSelect(search);
}
});
}
}
});
You can now call into your controller to make your AJAX call. This callback will allow you to use the component in different places in your project.
As #Rich comments, it's not certain what the problem seems to be. However, check this fiddle. It uses $scope.$watch to watch for changes in UserSearch, firing a request through $http if the text is longer than 3 characters.
$scope.$watch('UserSearch', function(UserSearch) {
if (UserSearch && UserSearch.length > 3) {
$http.get('/api/getAllUser?SearchUser=' + UserSearch).success(function(users) {
$scope.AllUser = users;
}).error(function() {
$scope.AllUser = [{name: 'test'}, {name: 'example'}];
});
}
});
Related
I created a simple component:
(function (module) {
'use strict';
function SomeCtrl() {
this.foo = function (event) {
this.someArray.forEach(function (part, index, array) {
//somelogic
array[index] = array[index] + " (foo)";
});
}
}
module.component('componentName', {
templateUrl: 'blah.html',
controller: SomeCtrl,
bindings: {
someArray: '=',
}
});
})(module);
Html template is also simple:
<div class="input-group">
<input type="text" class="form-control" ng-model="$ctrl.someArray" />
<span class="input-group-btn">
<a class="btn btn-default" ng-click="$ctrl.foo($event)">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</a>
</span>
</div>
{{$ctrl.someArray}}
Basically it's some input, and button. Input is bound with array, and on button click array is modified.
Unfortunately component behaves strange. Expression ({{$ctrl.someArray}}) is updated, but input value stays the same.
On the other hand, when user modify input value, then expression changes properly.
There are no errors thrown, no nothing. It's not even one-way binding, but unusual block of data flow...
var module = angular.module('myApp',[]);
module.component('componentName', {
controller: function SomeCtrl() {
this.foo = function (event, array) {
this.someArray.forEach(function (part, index, array) {
//somelogic
// array[index] ={'no':array[index].no+ " foo"};
console.log(array[index] ={'no':array[index].no+ " foo"});
});
}
},
template: `<div class="input-group">
<input type="text" ng-repeat="some in $ctrl.someArray" class="form-control" ng-model="some.no" /><br>{{$ctrl.someArray}}
<button class="btn btn-default" ng-click="$ctrl.foo($event, $ctrl.someArray)">
Okay
</button>
</div>`,
bindings: {
someArray: '=',
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<body ng-app="myApp">
<div ng-init="arrays=[{'no':'1'},{'no':'2'},{'no':'3'},{'no':'4'},{'no':'5'}]">
<component-name some-array="arrays"></component-name>
</div>
</body>
The problem lies in how the array is updated:
this.someArray.forEach(function (part, index, array) {
//somelogic
array[index] = array[index] + " (foo)";
});
It seems that AngularJS doesn't detect this kind of changes performed on the array. Solution is quite simple:
var newArray = []
this.someArray.forEach(function (part, index, array) {
//somelogic
newArray.push(array[index] + " (foo)");
});
this.someArray = newArray;
I have this directive that prepends an <i> element before each <input> element with add-icon-element attribute. Now what i'm trying to do is to observe validation for each <input> element, so when the user types something in one of them the class of the <i> element that precedes will change to fa-check green-i. I tried to do it by using attrs.$observe to see when the class changes from ng-invalid to ng-valid but it fires only one time when the DOM is structured, it doesn't react to changes in the input element.
What am i doing wrong? is there a way to do it using the input $valid?
I saw some answers regarding one input with suggestions to add names to the form and input - but what can I do if I have multiple inputs that I need to validate and not just one?
angular.module('mean.theme')
.directive("addIconElement", function () {
return {
restrict: 'EA',
link: function (scope, inputElement, attrs) {
var $icon = $('<i class="fa"></i>');
inputElement.before($icon);
attrs.$observe('class', function(val){
if (val.indexOf("ng-valid") >= 0) {
inputElement.prev().addClass('fa-check green-i');
}
});
}
};
});
and this is one of my 'inputs' in the html:
<form role="form" name="createProjectForm" class="form-validation">
<div class="form-group">
<label class="control-label text-center center-block" for="project.name">
Name Your Project
</label>
<div class="input-icon right">
<input type="text" placeholder="type here" name="project.name"
ng-model="project.name" required="required" class="form-control" add-icon-element/>
</div>
</div>
<form>
You don't need create a directive for such case, you could achieve this by using ng-class directive, only change your field name from name="project.name" to name="project_name"
<div class="input-icon right">
<input type="text" placeholder="type here" name="project.name"
ng-class="{'fa-check green-i': createProjectForm.project_name.$valid}"
ng-model="project.name" required="required"
class="form-control"/>
</div>
Update
To make it generic way, you need to require ngModel directive on that element, which will give you access to the ngModelController.
angular.module('mean.theme')
.directive("addIconElement", function () {
return {
restrict: 'EA',
require: 'ngModel', //require to get access to `ngModelController`
link: function (scope, inputElement, attrs, ngModelCtrl) {
var $icon = $('<i class="fa"></i>');
inputElement.before($icon);
scope.$watch(function(){
return ngModelCtrl.$valid; //made watch on field validation.
}, function(val){
if (val.indexOf("ng-valid") >= 0) {
inputElement.prev().addClass('fa-check green-i');
}
});
}
};
});
I think this will do it for you:
https://stackoverflow.com/a/23871934/1636157
angular.module('mean.theme')
.directive("addIconElement", function () {
return {
restrict: 'EA',
require: '^form',
link: function (scope, inputElement, attrs, ctrl) {
var $icon = $('<i class="fa"></i>');
inputElement.before($icon);
scope.$watch(ctrl.$name + '.' + inputElement.attr('name') + '.$valid', function (valid) {
if(valid) {
inputElement.prev().addClass('fa-check green-i');
} else {
inputElement.prev().removeClass('fa-check green-i');
}
});
}
};
});
I cannot figure out how can I count form fields which are valid:
For template i'm using common code:
<p class="input-group" ng-repeat="pomiar in pomiary track by $index">
<input type="number" class="form-control" ng-model="pomiar" is-float/>
<span class="input-group-btn">
<input class="btn btn-danger" ng-click="usunPomiar($index)"
type="button" value="X">
</span>
</p>
Validation is done via directive :
.directive('isFloat', function ($filter) {
var FLOAT_REGEXP_3 = /^\$?\d+(\.\d*)?$/; //Numbers like: 1123.56
var FLOAT_REGEXP_4 = /^\$?\d+(\,\d*)?$/; //Numbers like: 1123,56
return {
require: 'ngModel',
link: function (scope, elm, attrs, ctrl) {
ctrl.$parsers.unshift(function (viewValue) {
if (FLOAT_REGEXP_3.test(viewValue)) {
ctrl.$setValidity('float', true);
return parseFloat(viewValue);
} else if (FLOAT_REGEXP_4.test(viewValue)) {
ctrl.$setValidity('float', true);
return parseFloat(viewValue.replace(',', '.'));
}else {
ctrl.$setValidity('float', false);
return undefined;
}
});
ctrl.$formatters.unshift(
function (modelValue) {
return $filter('number')(parseFloat(modelValue) , 2);
}
);
}
};
});
I would like to display nuber of fields(inputs) in the template or store it in variable.
No problem if input isn't array and name attribute 'pomiar' is set:
{{myForm.pomiar.$valid}}
Do I have to write function in controller to validate it once again, or is there simpler way?
I have use the below link to make a filter on select option based on input text :
1. http://jsfiddle.net/tyrsius/67kgm/
2. http://www.knockmeout.net/2011/04/utility-functions-in-knockoutjs.html
3. Using Knockout to Filter ViewModel Data Using Multiple Fields/Columns and Controls
Faced a Error: Cannot write a value to a ko.computed unless you specify a 'write' option. If you wish to read the current value, don't pass any parameters.
Did some research and found the below link to solve
1. Possible Bug: Breeze.js 1.5 -- Cannot write a value to a ko.computed unless you specify a 'write' option
2. Cannot write a value to a ko.computed unless you specify a 'write' option
But still facing the error not able to find out the solution. Can anyone please help me I know this question has been ask most of the time . Ironically I am not able to find the solution.Where is the mistake??.
function AccessLevelVM() {
var self = this;
self.AccessLevel_nameSearch = ko.observable();
self.PositionTypeJobDesc = ko.computed(function () {
var filter = self.AccessLevel_nameSearch();
if (!filter) {
return self.PositionTypeJobDesc();
} else {
return ko.utils.arrayFilter(self.PositionTypeJobDesc(), function (item) {
return ko.utils.stringStartsWith(PositionTypeJobDesc.PositionByDept.toLowerCase(), filter.toLowerCase());
});
}
});
}
$(document).ready(function () {
ko.utils.stringStartsWith = function (string, startsWith) {
string = string || "";
if (startsWith.length > string.length) return false;
return string.substring(0, startsWith.length) === startsWith;
};
var Model = new AccessLevelVM()
ko.applyBindings(Model, document.getElementById('AccessLevelForm'));
});
HTML
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<div class="input-group">
<input type="text" name="SearchAccessLevel" class="form-control" placeholder="search" data-bind="value: AccessLevel_nameSearch, valueUpdate: 'afterkeydown'" />
<span class="input-group-addon glyphicon glyphicon-search"></span>
</div>
</div>
</div>
<div class="well" style="max-height: 300px;">
<select class="form-control input-sn" style="width: 94%;" size="4" name="sometext"
data-bind="options: PositionTypeJobDesc, optionsText: 'PositionByDept', optionsValue: 'PositionDepartmentRelId', optionCaption: ' Choose Job Position ... ', value: selectedPositionType, validationElement: selectedPositionType, event: { change: OnChangeJobPosition } " data-required="true">
</select>
</div>
</div>
You should try something like this
View:
<input type="text" data-bind="value:search" />
<div data-bind="foreach:filteredArray">
<span data-bind="text:name"></span>
</div>
ViewModel:
$(function() {
ko.applyBindings(new ViewModel());
});
var ViewModel = function () {
self.array=ko.observableArray([{'name':'charlie'},{'name':'sheen'}]);
self.search=ko.observable();
self.filteredArray= ko.computed(function () {
var filter = self.search();
if (!filter) {
return self.array();
} else {
return ko.utils.arrayFilter(self.array(), function (item) {
return ko.utils.stringStartsWith(item.name.toLowerCase(), filter.toLowerCase());
});
}
});
};
Working fiddle here
I need to work out a way of triggering NgChecked to re-evaluate it's expression after a user submits a form (which reloads the data). Ideally the trigged would be after the data has been reloaded, so the checkbox state is in line with that of the data and the amendments that have been made.
I've tried calling the expression directly after loadData() is called, however to no avail.
Do I instead need to use something like NgUpdate?
Any suggestions would be very much appreciated. Please see my code below:
view.html
<form ng-submit="updateinfo(item.downloadID); showDetails = ! showDetails;">
<input class="form-control" style="margin:5px 3px;" type="text"
ng-model="item.title" value="{{item.title}}"
placeholder="{{item.title}}"/>
<div class="checkbox" style="margin:5px 3px;">
<label for="downloadLive">
<input name="downloadLive" type="checkbox" ng-model="item.dlLive" ng-checked="liveCheckBoxState(item.dlLive);" ngTrueValue="1" ngFalseValue ="0"> Download live
</label>
</div>
<input class="btn btn-default form-control" style="margin:5px 3px;" type="submit"/>
</form>
controllers.js
// a scope function to edit a record
$scope.updateinfo = function(downloadID) {
id = downloadID
var result = $scope.items.filter(function( items ) {
return items.downloadID == id;
});
updatedata = $scope.items
$http({
method : 'PUT',
url : '/view1/downloadedit/'+id,
data : result
});
$scope.loadData();
};
//return correct state checkbox for downloadlive
$scope.liveCheckBoxState = function(dlLive) {
console.log(dlLive);
if (dlLive == 1) {
return true;
} else {
return false;
};
};
// a scope function to load the data
$scope.loadData = function () {
$http.get('/view1/downloadData').success(function (data) {
$scope.items = data;
});
};
$scope.loadData();