Search Posts

Category: ui-select

AngularJs: Bind ui-select from Json and filter table

Using AngularJS 1.3.4. I have a html table that is being populated from an web api where I make an http request to get that data and populate my html table. My example json is as below: { id: 1, firstName: “John”, lastName: “Rein”, status: ‘available’ }, { id: 2, firstName: “David”, lastName: “Gumry”, status: ‘not available’ } Now I have a dropdown below the table, and I am using ui-select for it. I want […]

How to give ui-select border CSS on focus

I am using ui-select for the first time and I have tried all combination in its css file to give the border css like form-control class but so far not successful. Here’ the image demo I want something like the input box to be in around my ui-select. Please help me in learning something new. Source: AngularJS

ui-select validate with hidden field and angular-validate plugin

Well, I have a hidden field in my form and trying to validate the ui-select element. I’m using the Angular-Validation plugin, which depends on the jQuery Validate plugin. On submit it shows the error label, but when the hidden fields gets it value from the ng-model, the error is still shown and also i am not able to submit the form. Here’s the html <ui-select ng-model=”noPostData.locaopt.id” theme=”selectize”> <ui-select-match placeholder=”Select Location”> {{$select.selected.name}} </ui-select-match> <ui-select-choices repeat=”obj.id as […]

Validate required ui-select field

I’m new with angular, and I need a way to validate a ui-select field, I have tried with ng-required=”true” and with requiered But as none of those work now I want to use bootstrap has-error class to show that the field is required, this is my code. <div class=”form-group”> <div ng-class=”{‘has-error’: !project.parentOrganization || project.parentOrganization == ”}”> <ui-select ng-model=”project.parentOrganization” theme=”bootstrap” reset-search-input=”true” tabindex=”4″ ng-required=”true” id=”{{‘itopOrganizationId’ + $index}}” required> <ui-select-match placeholder=”Seleccione una organizaci├│n padre”>{{$select.selected.name}}</ui-select-match> <ui-select-choices repeat=”value.id as value […]

ui-select it is possible to load data while typing

i’m new to angularjs. it is possible to load a data while typing in ui-select.Me having record more that 9000. can anyone help for this <ui-select ng-model=”item.general_ledger” name =”general_ledger_1″ id =”general_ledger_{{$index}}” theme=”selectize” ng-disabled=”disabled” style=”width: 150px;” ng-required=”true”> <ui-select-match placeholder=”Select Any GL”>{{$select.selected.Short_name}}</ui-select-match> <ui-select-choices repeat=”coa in loadCoalist | filter: $select.search” refresh=”refreshFunction($select.search, $select)” refresh-delay=”400″> <span ng-bind-html=”coa.Short_name | highlight: $select.search”></span> </ui-select-choices> </ui-select> Source: AngularJS

How to display nested object using ui-select’s group by property

So i have an ui select component that displays a list of object that have several properties, one property is another object, what I need is to display the array┬┤s objects grouped by a property in the nested object, look: image. Please I really need help on this one. Thanks in advance. This is why I tried: <ui-select-match placeholder=”Elija un Nutriente…”> {{$select.selected.nombre}} </ui-select-match> <ui-select-choices repeat=”a in allNutrientes| filter: $select.search” group-by=”‘idTiposDatosAlimentos.nombreTipoDato'”> <strong>{{a.abreviatura}} </strong> {{a.nombre}} <small><strong>Tipo de […]

How to fill ui-select choices items when user typing?

I am using ui-select to show items in select tag and search in items: <ui-select name=”courseId” ng-model=”vm.course.id”> <ui-select-match> <span ng-bind=”$select.selected.title”></span> </ui-select-match> <ui-select-choices repeat=”item.id as item in (vm.courses | filter: $select.search) track by item.id”> <span ng-bind=”item.title”></span> </ui-select-choices> </ui-select> How can I fill items when user is typing and make remote call instead of repeat directive? For example maybe something like this: <ui-select name=”courseId” ng-model=”vm.course.id”> <ui-select-match> <span ng-bind=”$select.selected.title”></span> </ui-select-match> <ui-select-choices refresh=”vm.searchCourses($select)”> <span ng-bind=”item.title”></span> </ui-select-choices> </ui-select> angular.module(‘rgh’).controller(‘CourseController’, CourseController); […]

UISelect with multiple select to show count instead of items selected

Hi I want to implement a ui-select for multiple items in such a way that it should show counts of the items selected rather than items tags itself. i.e if three items A,B and C are selected then showing A,B,C in ui-select-match or text area it should show 3 items with cross. <ui-select multiple ng-model=”ctrl.multipleDemo.removeSelectIsFalse” theme=”bootstrap” ng-disabled=”ctrl.disabled” close-on-select=”false” style=”width: 800px;” title=”Choose a person” remove-selected=”false”> <ui-select-match placeholder=”Select person…”>{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match> <ui-select-choices repeat=”person in ctrl.people | propsFilter: {name: […]

Angularjs Select values are getting removed from ngModel after being added programmicatically

I am using Angularjs 1.2.23 with select2 3.4.8. I have a multiselect box that gets populated based off the values selected in another dropdown. I use an click event on a button for fire a method that adds a list of ids to the ngModel object assigned to the multiselect box. I can see the values getting added properly after I trigger a change event on that form element because even after reading articles and […]

Angular UI-Select drop-down not closing on outbound touch [Safari-Ipad]

Anguar UI-Select drop down is not closing when i am trying to touch outside of dropdown. Browser : Safari Device : Ipad Code Link <ui-select ng-model=”ctrl.person.selected” theme=”select2″ ng-disabled=”ctrl.disabled” style=”min-width: 300px;” title=”Choose a person”> <ui-select-match placeholder=”Select a person in the list or search his name/age…”>{{$select.selected.name}}</ui-select-match> <ui-select-choices repeat=”person in ctrl.people | propsFilter: {name: $select.search, age: $select.search}” position=’up’> <div ng-bind-html=”person.name | highlight: $select.search”></div> <small> email: {{person.email}} age: <span ng-bind-html=””+person.age | highlight: $select.search”></span> </small> </ui-select-choices> Source: AngularJS

Next Page »