I am using ion-autocomplete in my project and here is what I want to do:
Here is the input field:
<label class="item item-input item-stacked-label">
<span class="input-label">Multiple select autocomplete</span>
<input ion-autocomplete type="text" readonly="readonly"
class="ion-autocomplete" autocomplete="on"
ng-model="model"
item-value-key="lastname"
item-view-value-key="firstname"
items-method="getTestItems(query)"
items-method-value-key="items"
placeholder="Enter test query ..."
items-clicked-method="itemsClicked(callback)"
items-removed-method="itemsRemoved(callback)" />
</label>
Here is the controller:
$scope.getTestItems =function (query) {
if (query) {
return {
items: [
{"matricule":"5324", "id":270, "lastname":"IZIKKI", "firstname":"SAID"},
{"matricule":"5505", "id":271, "lastname":"BOUKASIM", "firstname":"EL MAACHI"},
{"matricule":"5505", "id":272, "lastname":"BELMOUMENE", "firstname":"MHAMED"}
]
};
}
return {
items: []
};
};
What I want to do is, I want to do search by matricule. In other words, when I type 5324, I want to the last name and the first name associate to this matricule appear in the list. When I click done, I want to that appear in the model.
How can I achieve that please?
Related
I have this method:
getAnnouncements() {
this.restService.get('announcement').subscribe(data => {
this.announcements = data['payload'];
this.optionsFromDb = this.announcements;
this.options = this.optionsFromDb.map(option => ({checked: false, code: option.code, name: option.name}));
});
}
In html I have this:
<div class="form-group" *ngFor="let option of options">
<label class="checkbox-inline custom-checkbox nowrap">
<input type="checkbox" [checked]="option.checked" (change)="option.checked = !option.checked" />
<span>{{option.name}}</span>
</label>
</div>
getListOfChecked() {
return this.options.map( announcement => announcement.checked );
}
What I want is to display this option.name in html, but remove it from options. Any suggestion how can I do that? Because my post function receives only checked and code, not a name, thats why i want to remove it
If I understand, you want to display the name, but remove it before you send it to your web service, right ?
If you want to use map to do that, just do
let paylaodToSendToBackend = this.options.map(option => ({ checked: option.checked, code: option.code }));
before your HTTP call.
I have inputs that build from objects in array.
Everything got right but when input.type = 'file', Angular change it to text type and i cant figure it out.
Did anything notice this?
My template:
<span ng-repeat="input in formInputs">
<label for="{{input.id}}">{{input.label}}</label>
<input type="{{input.type}}" id="{{input.id}}" name="{{input.name}}" ng-model="input.insert" ng-required="input.must">
</span>
My array:
var formInputs = [
{
label : 'first name',
id : 'id1',
type : 'text',
name : 'name1',
must : true,
insert : ''
},
{
label : 'upload file',
id : 'id2',
type : 'file',
name : 'name2',
must : true,
insert : ''
}
]
My result:
<span ng-repeat="input in formInputs">
<label for="id1">first name</label>
<input type="text" id="id1" name="name1" ng-model="input.insert" ng-required="input.must">
<label for="id2">upload file</label>
<input type="text" id="id2" name="name2" ng-model="input.insert" ng-required="input.must">
</span>
EDIT:
I have this flowing:
<input type="{{childInput.type}}" id="{{childInput.id}}" name="{{childInput.name}}">
And this array:
var formInputs = [
{
id : 'id',
type : 'file',
name : 'name',
}
]
The resolute [only in Safari]:
<input type="text" id="id" name="name">
Why its happening?
Thanks for your help!
From the AngularJS Documentation for input:
Note: Not every feature offered is available for all input types. Specifically, data binding and event handling via ng-model is unsupported for input[file].
So it looks like Angular falls back to type="text". There are a lot of answers which bring solutions to this, check out:
ng-model for <input type=“file”/>
From that answer, here's a way to deal with a file input.
.directive("fileread", [function () {
return {
scope: {
fileread: "="
},
link: function (scope, element, attributes) {
element.bind("change", function (changeEvent) {
var reader = new FileReader();
reader.onload = function (loadEvent) {
scope.$apply(function () {
scope.fileread = loadEvent.target.result;
});
}
reader.readAsDataURL(changeEvent.target.files[0]);
});
}
}
}]);
As mentionned by Hackerman, his jsfiddle seem to work (with Angular 1.0.1) at first sight, but it doesn't seem to populate the model correctly.
I have a problem when implementing a nested list in Angular: the view gets updated properly but, on the other side, the code is not updated on change.
I think it will be much clearer with the code:
_this.categories = injections.map(function (category) {
return {
title: category.get('title'),
object: category,
criteria: category._criteria.map(function (oneCriteria) {
return {
object: oneCriteria,
type: oneCriteria.get("type"),
min: _this.range(oneCriteria.get("range")).min,
max: _this.range(oneCriteria.get("range")).max,
key: oneCriteria.get("key"),
value: _this.range(oneCriteria.get("range")).min,
defaultValue: _this.range(oneCriteria.get("range")).min,
selected: false
}
})
}
});
_this.category = _this.categories[0];
_this.job = {
title: '',
description: '',
salaryAmount: 0,
salaryTimeUnit: _this.salaryTimeUnits[0],
category: _this.category.object,
criteria: _this.category.criteria,
location: {latitude: 48.137004, longitude: 11.575928}
};
So and, very quick here is my HTML:
<div ng-repeat="category in controller.categories">
<input type="radio" name="group" ng-value="category.object.get('title')" id="{{category.object.get('title')}}"
ng-checked="controller.category == category" ng-click="controller.category = category">
{{category.title}}
</div>
<br>
Criteria:
<div ng-repeat="criterium in controller.category.criteria">
<div class="row vertical-align">
<div class="col-xs-9">
<span ng-click="criterium.selected = !criterium.selected"
ng-class="['list-group-item', {active:criterium.selected == true}]">{{criterium.key}}</span>
</div>
</div>
</div>
The problem is the following: the value are getting updated in the view (when you click on a radio button on the category, you see the corresponding criteria(s)). But the job is for one reason that I ignore not updated although it has the same reference as the HTML (a reference to this category.criteria).
Did I miss something?
controller.job.criteria is still just a reference to controller.categories[0]. Your code should successfully update controller.category to point at whichever category you clicked on, but that does not also update the reference in your job data structure.
What you want to do is make your ngClick event a bit more robust, i.e.:
<input type="radio" ng-click="controller.updateCategory(category)" />
and then in your js:
_this.updateCategory = function (category) {
_this.category = category;
_this.updateJob(category);
};
_this.updateJob = function (category) {
_this.job.category = category.object;
_this.job.criteria = category.criteria;
};
This will update the references in your job to match the new jazz.
I would, however, recommend leveraging ngModel and ngChange in your radios instead. Like:
<input type="radio" ng-model="controller.category" ng-value="category" ng-change="updateJob(category)" /> {{category.title}}
I have an array with many "contact" objects inside. Only one contact can be the primary contact (primary: true).
I also have a radio button to select which contact is the primary.
Q: How can I make one contact primary and deactivate all of the others (primary: false)? so only one object have the property (primary: true) and the rest false?
My example: http://plnkr.co/edit/Y3as4SXv2ZGQSF39W8O6?p=preview
.controller('ExampleController', ['$scope',
function($scope) {
$scope.addContList = [
{
email: "q#q.com",
jobTitle: "clerk",
name: "nico2",
phone: "1",
primary: true
},
{
email: "a#a.com",
jobTitle: "director",
name: "david",
phone: "1",
primary: false
}
];
$scope.$watch('addContList', function() {
console.log('changed', JSON.stringify($scope.addContList, null, 2))
}, true)
}
]);
Here is the view
<tr ng-repeat="contact in addContList">
<td>
<label class="radio-inline">
<input type="radio" value="" name="ui_cont" ng-model="contact.primary" ng-value="true">
</label>
</td>
<td>{{ contact.name }} value = {{contact.primary}} </td>
<td>Edit</td>
<td>Delete</td>
</tr>
You would want to add an ngChange event to your input and change all other inputs to false when one gets set to true. I have updated your Plnkr here: http://plnkr.co/edit/7gxI7if9nC7hAMQES1eu?p=preview
<input type="radio" value="" name="ui_cont" ng-change='changeOnPrimary(contact)' ng-model="contact.primary" ng-value="true">
Then in your controller:
$scope.changeOnPrimary = function(selectedContact) {
// iterate over your whole list
angular.forEach($scope.addContList, function(contact) {
// set primary to false for all contacts excepts selected
if (selectedContact.name !== contact.name) {
contact.primary = false;
}
});
}
Please note: the only reason I'm comparing the name field of the object is because there is no unique identifier to compare with. In real code, you would want to compare against an ID rather than a name field.
You can define a new scope property
$scope.primary = null
Then you can define a listener
$scope.$watch("primary", function(value) {
$scope.addContList.forEach(function(contact) {
contact.primary = angular.equals(value, contact);
})
})
and you can define a default value after defining the list
$scope.primary = $scope.addContList[0];
and in the html you change the input line in
<input type="radio" value="" name="ui_cont" ng-model="$parent.primary" ng-value="contact">
You need to use $parent.primary instead of primary, because ng-repeat defines a new child scope.
see http://plnkr.co/edit/5pvatBNwnrJhGzKhOIys?p=preview
In the following code of Knockoutjs both the first name and last name works. The problem comes with displaying the full name. Its not getting the value of "this.firstName" and "this.lastName". How can i fix this problem.
var AppViewModel = {
firstName:ko.observable("Bert"),
lastName:ko.observable("Bertington"),
fullName:ko.pureComputed(function(){
return this.firstName()+ " "+this.lastName();
}, this, {deferEvaluation : false})
};
<h1>Introduction</h1>
<p>First name: <strong data-bind="text:firstName">todo</strong></p>
<p>Last name: <strong data-bind="text:lastName">todo</strong></p>
<p>First name: <input data-bind="value:firstName" /></p>
<p>Last name: <input data-bind="value:lastName" /></p>
<p>Full name: <strong data-bind="text:fullName"></strong></p>
i made some slightly changes as i am used to use knockout
var AppViewModel = function (data){
this.firstName=ko.observable("Bert"),
this.lastName=ko.observable("Bertington"),
this.fullName=ko.computed(function(){
return this.firstName() + this.lastName()
}, this, {deferEvaluation : false})
}
appModel = new AppViewModel();
ko.applyBindings(appModel);
here is a working fiddle:
http://jsfiddle.net/su3sfdff/
if you wanted the computed to be "live"
adjust the valueUpdate property this:
<p>First name: <input data-bind="value:firstName,valueUpdate:['afterkeydown', 'input']" /></p>
<p>Last name: <input data-bind="value:lastName,valueUpdate:['afterkeydown', 'input']" /></p>
http://jsfiddle.net/su3sfdff/1/