Below is a simple example how I intend to use check boxes. What I have is an array of terms with id and name field and each post can be assigned to a single or multiple terms/categories.
var config = {};
config.terms = [
{id: 1, termName: 'Red'},
{id: 2, termName: 'Green'},
{id: 3, termName: 'Blue'}
];
Problem
With EmberJS handlebar expression I am showing those checkboxes but I am confused what to use as form element variable name field doesn't seem to defined in the controller. The checked field works as controller property but when I add termName as checked all of the checkboxes are checked by default and label after checking changes after clicking checkboxes.
What I need to get on the controller is the term names that are selected
Below is the example code. You can also find it on JsFiddle. Check uncheck the red/green/blue checkboxes to see the problem. Also have a look in console.
HTML
<div id="main"></div>
<script type="text/x-handlebars" data-template-name="index">
{{#each term in terms}}
{{input type="checkbox" name=term.name}} {{term.name}}
{{/each}}
<button {{action "submit"}}>Submit</button>
</script>
JS
var config = {};
config.terms = [
{id: 1, name: 'Red'},
{id: 2, name: 'Green'},
{id: 3, name: 'Blue'}
];
App = Ember.Application.create({
rootElement: '#main'
});
App.IndexRoute = Ember.Route.extend({
setupController: function(controller){
controller.set('terms', config.terms);
}
});
App.IndexController = Ember.Controller.extend({
actions: {
submit: function(){
console.log(this.Red);
console.log(this.Blue);
console.log(this.Green);
}
}
});
In you jsfiddle example you'r binding the name to the checked value of the checkbox. I think that's not what you want to do.
The checked value should be bound to a boolean value.
So,
1st approach: either add a property to your term object (selected: false)
config.terms = [
{id: 1, name: 'Red', selected: false },
{id: 2, name: 'Green', selected: false },
{id: 3, name: 'Blue', selected: false }
];
(as Ember objects:)
config.terms = [
Em.Object.create({id: 1, name: 'Red', selected: false }),
Em.Object.create({id: 2, name: 'Green', selected: false }),
Em.Object.create({id: 3, name: 'Blue', selected: false })
];
and then bind the property in your template this way:
{{input type="checkbox" checked=term.selected}}
2nd approach: bind it to controller properties:
// inside your controller:
redSelected: false,
greenSelected: false,
blueSelected: false,
{{input type="checkbox" checked=controlller.redSelected}}
Related
Is it possible to get the selected items count in the kendoMultiSelect's footerTemplate?
I created a DOJO example with an attemp to use instance.dataItems().length but for some reason, the value is always 0.
$("#customers").kendoMultiSelect({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
dataValueField: "id",
footerTemplate: '#: instance.dataItems().length # item(s) selected'
});
EDIT:
due #Aleksandar comment where he points out
Calling setOptions in an event handler or the respective widget is not
recommended and can cause an endless loop or a JavaScript error.
I take his suggestion into account and add his solution as an answer.
footerTemplate: '<span id="total">#:instance.value().length#</span> item(s) selected',
change:function(e){
var itmsSelected = e.sender.value().length;
$("#total").html(itmsSelected);
}
OBSOLETE:
Guess it's not in an observable object. One of the possible solutions is to change footerTemplate
every time a change happens on multiSelect:
var multi = $("#customers").kendoMultiSelect({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
change: function() {
this.setOptions({"footerTemplate": this.value().length +" item(s) selected"});
},
dataTextField: "name",
dataValueField: "id",
footerTemplate: '0 item(s) selected'
}).getKendoMultiSelect();
Example: Footer template update
How can I change my jQuery autocomplete to use an Id instead of my values?
I would like to display the list of names but send a search using the Id value. Now it is working properly with the names but I think it will be more effective if it tries to find a unique value as an ID.
$.getJSON('Dashboard/CompaniesWithId', function (data) {
$.each(data, function (i, item) {
sellers[i] = item.Name;
sellersID[i] = item.Id;
});
}).error(function () {
console.log("error loading seller to the autocomplete");
});
$("#searchSeller").autocomplete({
messages: {
noResults: 'No sellers with this name',
},
minLength: 2,
delay: 500,
source: sellers,
});
you can add a hidden field and use the on select event to set the value of the hidden field to the selected id
http://api.jqueryui.com/autocomplete/#event-select
you can also use selection data with format [{value: 'value', label: 'label'}] but using this way, the field will show the id instead of the label
var availableTags = [
{id: 1, label: "ActionScript"},
{id: 2, label: "Ruby"},
{id: 3, label: "Scala"},
{id: 4, label: "Scheme"}
];
availableTags2 = [
{value: 1, label: "ActionScript"},
{value: 2, label: "Ruby"},
{value: 3, label: "Scala"},
{value: 4, label: "Scheme"}
];
$( "#a" ).autocomplete({
source: availableTags,
select: function( event, ui ) {
$('#tosend').val(ui.item.id);
}
});
$( "#b" ).autocomplete({
source: availableTags2
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>
id to send<br>
<input type="text" name="tosend" id="tosend"><br><br>
type below<br>
<input id="a"><br>
<br>
<br>
using value instead of id<br>
<input id="b">
I don't know anything about your back-end. But assuming it is accepting IDs for your search parameters, will changing the source value to sellersID resolve your issue? You also have that extra comma after sources. It will cause you problems.
$("#searchSeller").autocomplete({
messages: {
noResults: 'No sellers with this ID.',
},
minLength: 2,
delay: 500,
source: sellersID
});
I would like to know if I could change select options using Angular-Formly depending on another select's selected value.
Lets say I have beverageTypeSelect and drinkSelect.
beverageTypeSelect has options Alcoholic and Non-Alcoholic.
drinkSelect would have Heineken, Budweiser, Alcohol 96%, if beverageTypeSelect value is Alcoholic.
drinkSelect would have Coca-Cola, Pepsi, Water, if beverageTypeSelect value is Non-Alcoholic.
How can I do that?
Editing:
Ok, let's try to make it a little more clear:
This is not my real application, but I want to keep it simple and get the general solution for this, so I'll keep with the beverage.
We are using https://github.com/formly-js/angular-formly-templates-bootstrap.
We have a formly forms generator. The part of code that is interesting in here is this:
if (obj.ngOptions){
o.templateOptions.options=[];
o.templateOptions.ngOptions = obj.ngOptions;
}
We have figured out that options must by an empty array so ngOptions can take place.
So we have a formly form like this:
[{
key: 'beverageTypeSelect',
type: 'select',
templateOptions: {
options: [{
name: 'Alcoholic',
value: 'A'
},
{
name: 'Non-Alcoholic',
value: 'N'
}]
}
}, {
key: 'drinkSelect',
type: 'select',
templateOptions: {
options: [],
ngOptions: 'item as item.label for item in model.drinkSelect track by item.id'
}]
Then we'll have a html to show our form:
<formly-form fields="formFields" model="DrinkingCtrl.data" form="DrinkingCtrl.form">
</formly-form>
And, finally, our controller:
'use strict'
angular.module('drunkApp')
.controller('DrinkingCtrl', drinking);
function drinking($scope, $stateParams, $state, $reactive, AutoSaveReactiveFormScope) {
var self = this;
var vm = AutoSaveReactiveFormScope($scope, this, 'NAME_TO_SEARCH_FOR_DRINK_FORMLY_FORM', 'drinkPublishName', drinkMongoCollection, $stateParams.id); // This is a factory that gives us everything (or almost it) that we need in a controller with form autosave functionallity :).
var drinkOptions = [{
id: 'H',
label: 'Heineken',
types: ['A']
}, {
id: 'B',
label: 'Budweiser',
types: ['A']
}, {
id: 'A',
label: 'Alcohol 96%',
types: ['A']
}, {
id: 'C',
label: 'Coca-Cola',
types: ['N']
}, {
id: 'P',
label: 'Pepsi',
types: ['N']
}, {
id: 'W',
label: 'Water',
types: ['N']
}];
vm.autorun(function() {
if (self.data) {
self.data.drinkSelect = _.filter(drinkOptions, function(drk) {
return _.contains(drk.types, self.data.beverageTypeSelect);
});
}
});
}
This really works, but I was expecting something cleaner, something that I could do directly inside of the form declaration. Maybe do something like we can do with required or hideExpression (that we can write something like 'model.option1 != "BLA"' or a function).
p.s.: Hope this time I made myself clearer.
I'm creating radio buttons with ng-repeat and would like the selected button's name value to appear below.
Here is my view:
<span ng-repeat="weight in weights">
<input type="radio" name="weight" value="{{weight.name}}" id="weight{{weight.name}}" ng-checked="weight.checked">
<label for="weight{{weight.name}}">{{weight.name}}</label>
</span>
<p>Weight: {{weight.name}}</p>
Here is my controller:
$scope.weights = [
{
name: 1,
checked: true
},
{
name: 2,
checked: false
},
{
name: 3,
checked: false
}
];
Here is my Plunker.
How can I get the weight to appear in the paragraph tag?
You should maintain value of radio in one of the ng-model & use $parent. to define it in controller scope rather than in ng-repeat like here
Markup
<body ng-controller="MainCtrl" ng-init="radioValue=1">
<span ng-repeat="weight in weights">
<input type="radio" name="weight" ng-model="$parent.radioValue" ng-value="{{weight.name}}" id="weight{{weight.name}}" ng-checked="weight.checked">
<label for="weight{{weight.name}}">{{weight.name}}</label>
</span>
<p>Weight: {{radioValue}}</p>
</body>
Working Plunkr
The answer lies in understanding how $scope works in angular.
The quick solution is to use $parent.selectedName, where $parent refers to the parent scope. This is because each iteration of ng-repeat creates a scope of itself. (see enter link description here
See this https://jsfiddle.net/pankaj01/Xsk5X/3074/
the JS is
function MyCtrl($scope) {
$scope.weights = [
{
name: 1,
checked: true
},
{
name: 2,
checked: false
},
{
name: 3,
checked: false
}
];
}
I am using the ngGrid module for AngularJS to show some paged data. I want to be able to search across multiple columns, however using an OR search.
Lets say I have a column with the following headings: Id, Name, Description. When I search I want to return all rows where either Id OR name OR description contain the search term.
$scope.pagingOptions = {
pageSizes: [20, 50, 100],
pageSize: 20,
totalServerItems: 0,
currentPage: 1
};
$scope.gridOptions =
{
data: 'myData',
columnDefs: [
{ field: 'id', displayName: 'Id' },
{ field: 'name', displayName: 'Name' },
{ field: 'description', displayName: 'Description' },
{ displayName: 'Actions', cellTemplate: '<input type="button" data-ng-click="doSomething(row.entity)" value="Do Something" />'}],
enablePaging: true,
showFooter: true,
showFilter: true,
pagingOptions: $scope.pagingOptions,
filterOptions: {
filterText: "",
useExternalFilter: false
}
};
I have tried using the default search box, and also using an external input box bound to $scope.filterText to define a custom filter such as:
$scope.filterUpdated = function () {
$scope.gridOptions.filterOptions.filterText = 'id:' + $scope.filterText + ';name:' + $scope.filterText + ';description:' + $scope.filterText;
};
However this seems to do an AND on all of the columns. Is it possible to achieve what I want using the ngGrid module?
Thanks in advance,
Chris
Yes it's possible to do an OR filter, but after searching in the ng-grid source code I can't see how it can be done using their filterOptions.filterText. That can do AND filtering only.
The solution would be then to use filterOptions.useExternalFilter:true
I also found no examples of it, but after playing around with that for a bit, I got the notion that the filter is actually done by re-creating the gridOptions.data object|array. That is the only downside to this filter.
Plunker code is here
So basically your code would look like this index.html:
<body ng-controller="MyCtrl">
<strong>Filter Name:</strong> </string><input type="text" ng-model="filterName"/>
</br>
OR
</br>
<strong>Filter Age:</strong> </string><input type="text" ng-model="filterAge"/>
</br>
<button ng-click="activateFilter()">Run Filter</button>
<br/>
<br/>
<div class="gridStyle" ng-grid="gridOptions"></div>
</body>
And in your controller.js:
app.controller('MyCtrl', function($scope) {
$scope.filterOptions = {
filterText: '',
useExternalFilter: true
};
$scope.activateFilter = function() {
var name = $scope.filterName || null;
var age = ($scope.filterAge) ? $scope.filterAge.toString() : null;
if (!name && !age) name='';
$scope.myData = angular.copy($scope.originalDataSet, []);
$scope.myData = $scope.myData.filter( function(item) {
return (item.name.indexOf(name)>-1 || item.age.toString().indexOf(age) > -1);
});
};
$scope.originalDataSet = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.myData = angular.copy($scope.originalDataSet, []);
$scope.gridOptions = {
data: 'myData',
filterOptions: $scope.filterOptions
};
});
That's just basic filtering (use regex and/or convert to lowercase for better matching). Also note that if both name and age are empty I set name to be '' and then every element would return true inside the filter (resulting in the whole dataset return).
This option is much better suited to dynamic dataset (read - server fed), but it works just as well but replicating the original dataset and applying the filters on it.