The selected option is not visually highlighted in the ui-select due to a programming issue

angular version: AngularJS v1.3.6 http://github.com/angular-ui/ui-select : Version: 0.8.3

var p1 = { name: 'Ramesh', email: '[email protected]', age: 99 };

   $scope.people = [
            { name: 'Amalie',    email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f6979b979a9f93b6939b979f9ad895999b">[email protected]</a>',    age: 12 },
            { name: 'Wladimir',  email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d0a7bcb1b4b9bdb9a290b5bdb1b9bcfeb3bfbd">[email protected]</a>',  age: 30 },
            { name: 'Samantha',  email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8dfeece0ece3f9e5eccde8e0ece4e1a3eee2e0">[email protected]</a>',  age: 31 },
            { name: 'Estefanía', email: 'estefaní<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="016041646c60686d2f626e6c">[email protected]</a>', age: 16 },
            { name: 'Natasha',   email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5b353a2f3a28333a1b3e363a323775383436">[email protected]</a>',   age: 54 },               
            { name: 'Adrian',    email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="432227312a222d03262e222a2f6d202c2e">[email protected]</a>',    age: 21 },
            p1
        ];

 $scope.people.selected = p1 ;

html:

  <ui-select  class="full-width-select select" ng-model="people.selected" theme="select2">
                <ui-select-match  allow-clear="false">{{$select.selected.name}}</ui-select-match>
                <ui-select-choices repeat="person in people | filter:$select.search">
                    <div ng-bind-html="person.name | highlight: $select.search"></div>
                </ui-select-choices>
            </ui-select>

Issue is When p1 is selected programatically the

p1 object is not highlighted in the ui-select drop down.

Output is:

http://plnkr.co/edit/3mrECwGJbz2UYcrDiCha?p=preview

javascriptangularjsui-select2ui-select

Answer №1

This issue arose due to a recent update in AngularJS version 1.3.1:

$observe: now checks if the attribute is undefined

Ui-select utilizes the $observe function to establish a default value for resetSearchInput:

attrs.$observe('resetSearchInput', function() {
  var resetSearchInput = scope.$eval(attrs.resetSearchInput);
  $select.resetSearchInput = resetSearchInput !== undefined ? resetSearchInput : true;
});

However, with the recent change as mentioned above and the fact that resetSearchInput remains undefined, the observer function will not be triggered.

To temporarily resolve this issue, include the following attribute in your ui-select element:

reset-search-input="'false'"

Demo: http://plnkr.co/edit/M0pXrN3n6CBjjoJXS4df?p=preview

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the capabilities of Angular through filter functions and ng-bind-html

I created an angular filter called 'strLimit' to restrict the number of characters in a string: mod.filter('strLimit', ['$filter', function ($filter) { return function (input, limit) { if (!input) return; if (input.le ...

javascriptangularjs

The Angular routing functionality appears to be malfunctioning

I am currently implementing routing in my project using basic angular route with Angular 1.3.0. Here is the content of my app.js file: 'use strict'; var routerApp = angular.module('mcw', [ 'ngRoute', 'mcw.controll ...

javascriptangularjsroutessingle-page-applicationangularjs-routing

Choose the dropdown item depending on the related text

I am currently working on a drop-down menu where each option has a value and associated text. The selected option is then displayed row by row in a table, with an edit button next to each row that allows the user to change the selection. I am trying to imp ...

javascriptphp

The saving function of the Jquery camera is not working properly and does not store the

I seem to be having an issue when using the jquery camera in "save" mode. Despite trying to call the url in "webcam.save" manually, it doesn't seem to have any effect. It appears that the jquery camera plugin may not be functioning as intended. Any su ...

javascriptjquery

Tips for adding text dynamically to images on a carousel

The carousel I am using is Elastislide which can be found at http://tympanus.net/Development/Elastislide/index.html. Currently, it displays results inside the carousel after a search, but I am struggling to dynamically add text in order to clarify to use ...

javascriptjqueryhtml

Cypress is having trouble loading a particular URL

I'm encountering a timeout error while trying to load a specific URL using Cypress. Even after setting the page load time to 2 minutes, the issue persists. Interestingly, general URLs like https://www.google.co.nz/ load without any problems. it(' ...

javascripttestingautomated-testscypress

Sending various types of data to an MVC C# controller using AJAX

Currently, I am utilizing AJAX to retrieve information from a Razor View and forward it to the controller. Although everything is functioning as expected, I now face the challenge of passing an array along with a string as the data: // View - JavaScript v ...

javascriptc#jqueryajaxasp.net-mvc

Tips for preserving user input from HTML into a text file and then reloading it back into the HTML document

I have recently created a character sheet for a game using HTML. The HTML file is mainly comprised of various input tags such as <input type="text">, <input type="number">, <input type="checkbox">, <input type="radio">, <select&g ...

javascripthtml

Guide to verifying a value within a JSON object in Ionic 2

Is there a way to check the value of "no_cover" in thumbnail[0] and replace it with asset/sss.jpg in order to display on the listpage? I have attempted to include <img src="{{item.LINKS.thumbnail[0]}}"> in Listpage.html, but it only shows the thumbna ...

javascripthtmltypescriptionic-frameworkionic2

Refresh the table dynamically in Django without the need to reload the entire page

Seeking assistance to update a small table with new data every 10 seconds on a Django website. The data is parsed into JSON and refreshed in the database, then displayed on the front-end. Looking for help with writing AJAX code to continuously refresh the ...

javascriptjqueryajaxdjangodjango-views

Guide on how to pass the chosen dropdown value from a custom component back to the main component

I've developed a customized MUI select component in React and have integrated it multiple times within another component as shown: customDropdown.js import * as React from 'react'; import FormControl from '@mui/material/FormControl&ap ...

javascriptreactjsmaterial-ui

Is it possible to activate or deactivate a button depending on a radio button selection using jQuery?

Below is the code I have written in an aspx file: <asp:Button ID="btn" runat="server" Text="Add As a Sub Organization" OnClick="lnkChild_Click" ValidationGroup="GroupA" class="btn-u" CausesValidation="true" /> <asp:GridView ID="grdDuplicateO ...

javascriptjquery

Steps to transfer the angularfire log in object to a service file

I am looking to enhance the usage of the logged-in object across my site. I am interested in moving this object to a service so that I can efficiently check for user authentication. Below is my login controller: .controller('LoginCtrl', function ...

angularjsfirebaseangularfirefirebase-authentication

How can I retrieve Feature Information exclusively from the currently visible WMS layers in OpenLayers 3?

I am working with an Openlayers map that features multiple WMS layers. I am trying to use the "getGetFeatureInfoUrl" function to request feature information, but only for the layers that are currently visible on the map. Additionally, if there are multiple ...

javascriptjqueryopenlayers-3

Unable to display texture and color on .obj files in Three.js

After introducing a new model in .obj and .mtl formats into my three.js code, I encountered an issue where the color of the model would turn white, regardless of its original color or texture. Below is a snippet of the code related to the pig model: // ...

javascripthtmlcssthree.js

Updating the jQuery mobile webpage

I have set up a small demo with two pages - the Home page and the Team 1 page. By clicking on the navigation menu, you can navigate to the Team 1 page from the Home page. However, if you are already on the Team 1 page and click on the Team 1 button again ...

javascriptjqueryhtmljquery-mobile

Implement an event listener to detect incoming SMS messages using the mozMobileMessage API within the Boot to Gecko (B

As part of a university assignment, I have embarked on the journey of learning how to develop apps using AngularJS for Firefox OS. This marks my maiden voyage into the realm of JS app development. The primary objective of this app is to execute commands t ...

angularjsfirefox-os

Sending JSON data containing special characters from AngularJS to Ruby server

I am currently working on creating a search form that utilizes Ruby for the back end and Angular for the front end. The search query is constructed in Angular in JSON format and then sent to Ruby through a RESTangular service. Everything was functioning c ...

ruby-on-railsangularjsjsonrubyrestangular

The challenge of rendering in Three.js

After configuring my code to render a geometry, I discovered that the geometry only appears on the screen when I include the following lines of code related to control: controls = new THREE.OrbitControls(camera, renderer.domElement); controls.addEventList ...

javascriptthree.js

Ways to conceal a div in React when the input or child is not in focus

My custom search and select component includes an input field and a results list enclosed in a wrapper container: <div className='wrapper'> <input /> <div className='results'> <div>Result Item</div> ...

javascriptreactjs