Having trouble with AngularJS UI-Select tagging feature? Let's troub

THE ISSUE:

I am facing a challenge with my angular app which is responsible for sending emails.
There are three input fields: Address - Subject - Text.
The address field utilizes angular framework from ui-select

The user can either select an email address from the dropdown list or enter a new one manually.
However, I am encountering difficulties in creating a new entry.

According to the documentation, it is suggested to use the attribute tagging in order to add a new value.

Unfortunately, despite following the instructions, I am still unable to make it work.


CODE SNIPPET:

(example of adding a new tag)

<ui-select multiple tagging tagging-label="(custom 'new' label)" ng-model="multipleDemo.colors" theme="bootstrap" ng-disabled="disabled" style="width: 300px;">

    <ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>

    <ui-select-choices repeat="color in availableColors | filter:$select.search">
        {{color}}
    </ui-select-choices>

</ui-select>


$scope.availableColors = ['Red','Green','Blue','Yellow','Magenta','Maroon','Umbra','Turquoise'];
$scope.multipleDemo = {};
$scope.multipleDemo.colors = ['Blue','Red'];


PLUNKER EXAMPLE:

http://plnkr.co/edit/T55LeKK66Idb3lD8DDPz?p=preview

Despite trying, I am still unable to successfully insert a new value using this method.


QUERY:

What is the correct way to add a new value in angular ui-select?

Answer №1

The provided plunks are compatible with version 0.8.2, but tagging functionality is optimized for 0.8.3.

Answer №2

If you want to achieve this, you can employ a handy jQuery technique—

  1. Simply assign a class or id to the ui-select tag.
  2. In your angular controller, grant access by id and class like so:

    <ui-select reset-search-input="true" ng-model="myModel.SerialNumber" theme="bootstrap"
            ng-required="true" name="SerialNumber" class="YourClass" Id="YourId">
        <ui-select-match placeholder=" {{'VehicleMaster.SerialNumber'| translate}}">
            {{$select.selected.SerialNumber}}    
        </ui-select-match>
        <ui-select-choices repeat="item in IMEISerialsDropDown | filter: $select.search">
            <div ng-bind-html="item.SerialNumber"></div>
        </ui-select-choices>
    </ui-select>        
    
    $(".YourClass").find("input.ui-select-search").on("focusout", function (val) {
        var variable = $(".YourClass").find("input.ui-select-search").val();
        if (variable .length > 0 && variable .length != null) {
            var variableJson = {
                        SerialNumber: variable ,
                    };
                    $scope.myModel.ModelProperty= variableJson;
        }
    });
    

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

displayEvent not functioning properly within fullcalendar

I'm attempting to add an event to FullCalendar.io using a JavaScript function. I've tried two methods. Triggering the function at the end of the page or by clicking. No error is displayed, but the event isn't showing up on my calendar. & ...

Executing a Javascript function repeatedly

Here is a sample JavaScript function: function f1() { alert("HI"); } I have two different locations where I am calling the same JavaScript function: <input type="submit" id="btn1" onclick="f1()"/> <input type="submit" id="btn2" onclick="f1 ...

Elements can only be added to the array at the 0th index

In the process of developing a function, I encountered an issue where all elements added to the array were only stored in Array[0] of the rowData. The data is retrieved from a database. private createRowData() { var rowData:any[] = []; thi ...

What could be the reason for event.stopPropagation() not functioning properly with a switch statement

Could you please explain why the function event.stopPropagation() is not working on the switch element? Whenever I click on the switch, it prints the console log for the switch. However, when I click on the surrounding area (row), it logs the row event in ...

What is the best way to confirm the validity of an email address?

With jQuery Tag-It, I want to validate the tag value as a valid email address. How can I achieve this validation using tag-it? ...

Tips for displaying a specific JSON element when using interpolation in Angular

How can I display a specific element from a JSON object using Angular interpolation? public responseData:any; renderTokenCard(){ this.mundipaggS.checkToken().subscribe((response:any)=> { console.log("success: ", JSON.stringify(res ...

suggestions for customizing Angular Material

The guidelines regarding materials specify that: "For any Angular Material component, you are allowed to define custom CSS for the component's host element that impacts its positioning or layout, such as margin, position, top, left, transform, and z- ...

What could be causing this error to occur when running my React app and clicking the submit button on the form?

CodeBlock.js import React from "react"; import { useState } from "react"; import axios from 'axios' const CodeBlock=()=>{ const [formData, setFormData]=useState({name:'', password:''}); const hand ...

Spin the AngularJS icon in a complete 360-degree clockwise rotation

Hey there! I'm new to Angular and I'm trying to create a button that will make an icon inside rotate 360 degrees when clicked. Right now, the entire button is rotating instead of just the element inside it. I want only the "blue square" to rotate ...

Sequencing the loading of resources in AngularJS one after the other by utilizing promises

While working in a service, my goal is to load a resource using $http, store it in a variable, load a child resource and store that as well. I understand the concept of promises for this task, but I am struggling with how to properly implement it in my cod ...

Counting the elements on a page using Selenium and Node.js: A step-by-step guide

I've been experimenting with Selenium in Javascript using NodeJS and I'm trying to tally up some elements based on CSS selectors. So far, I've attempted a few methods: client.findElements(By.css(".some-class")).size(); However, I encounte ...

Issues with tabs functionality in Bootstrap version 4.3.1, unlike the smooth operation in v4.1.0

I encountered an interesting situation recently. After spending almost 3 hours troubleshooting my code, I discovered that it functions perfectly on Bootstrap v4.1.0 but fails on the latest version, v4.3.1. Working JSFiddle with Bootstrap v4.1.0: https://j ...

Experiencing a timeout issue when attempting to retrieve the content of a toast notification

Here is the structure for a toast alert using DOM: <uib-alert id="alert-message-0" class="cs-toast-alert ng-binding ng-scope" ng-repeat="alert in headerModel.alerts()" type="success" close="" ng-style="{bottom: (((headerModel.alerts().length - $ind ...

Obtaining the value of an input field in HTML

I am currently working on a text input field that triggers a JavaScript function when a numeric value is entered. <input type="text" value="key" ng-keypress="submit(key)" ng-model="pager.page"/> Controller $scope.submit = function (val) { ...

Is there a way to reload a form within the same html div when the submit button is clicked?

As a beginner in programming, I have recently started learning javascript and ajax after previously studying php. Currently, I am working on creating a website framework using html/php for the main structure, while incorporating js/ajax for form data handl ...

Limiting the amount of text a user can input in an HTML textbox with dynamic capabilities

I am looking to create a script in Html/javascript (or can be done in php) that functions similar to Twitter - where as a user enters text in a field, a label dynamically updates to show the remaining characters left. Can anyone provide me with a straight ...

Using Javascript, display an image that was previously hidden with CSS when a radio button is selected

Within a table of 25 rows, each row contains an attribute accompanied by an image (represented by a tick symbol) and five radio buttons for rating the attribute from 1 to 5. Upon clicking one of the radio buttons, the hidden image (tick symbol) should beco ...

Steps to clear a form after submitting it

Hello all, I have a rather complex form that sends a message successfully with an alert after submission. I'm wondering how I can clear the entire form once it has been submitted to make it simple? Below is my HTML Form and JavaScript code. I would l ...

Struggling to implement the UI router into my Angular Framework

I've been working on a framework that is supposed to be router agnostic. While I've managed to make it work with ngRoute, I just can't seem to get it functioning with UI Router. Here's a snippet of the main app module: (function () { ...

The JavaScript loop does not update the value of a number input field

In an effort to save and retrieve data from local storage, I have implemented a loop that iterates through various fields in a dynamic table row. The process involves saving the data to local storage, clearing the table rows, recreating them for data retr ...