Make sure to specify the ac-options and ac-model attributes when using the Acute select feature in Angular Js

I am looking for a solution using acute select. I found some information on this website.

However, I encountered an error in the console after adding all the necessary dependencies.

MainPage.html

<ac-select ac-model='hospitalData.hospitalName' 
 ac-options='hospital.hospitalName as hospital.hospitalName for hospital in hospNameList' 
 ac-change='selectionChanged(value)' 
 ac-settings='{ loadOnOpen: true }'></ac-select>

Error

The ac-options and ac-model attributes must be set correctly <ac-select ac-model="hospitalData.hospitalName" ac-options="hospital.hospitalName as hospital.hospitalName for hospital in hospNameList" ac-change="selectionChanged(value)" ac-settings="{ loadOnOpen: true }" class="ng-isolate-scope">

Controller.js

scope.hospitalData=null;
scope.hospitalData.hospitalName=null;
scope.hospNameList=null;
//I added the above code after referring to an issue on GitHub, but it is still not working.  

gethospNameList();
function gethospNameList() {
    Repository.gethospNameList().then(
    function(result) {
      scope.hospNameList = result;
      console.log("hospNameList :"+ scope.hospNameList);
    });
};
javascriptangularjs

Answer №1

Discover the solution with the help of angular-ui-select

Take a look at this abbreviated version:

Validate the plunger to see the functional code:

var app = angular.module('myApp', ['ui.select']);
app.controller('myCtrl', function($scope) {
    $scope.superhero = {
      selected: 'Sravan'
    };
       
    $scope.getSuperheroes = function(search) {
     var newSupes = $scope.superheroes.slice();
      if (search && newSupes.indexOf(search) === -1) {
        newSupes.unshift(search);
      }
      return newSupes;
    }
    
    $scope.superheroes = [
      'Sravan',
      'Hema',
      'AnotherUser',
        
    ];
});

    
<html>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css">    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.default.css">
  <script type="text/javascript" src="script.js"></script>
  <script type="text/javascript" src="select.js"></script>
    <link rel="stylesheet" href="style.css">

  <body>
    <div ng-app="myApp">
      <div ng-controller="myCtrl">
        <div class="row">
          <div class="form-group">
            <div class="col-sm-6">
              <ui-select ng-model="superhero.selected">
                <ui-select-match placeholder="Select or search a superhero ...">{{$select.selected}}</ui-select-match>
                <ui-select-choices repeat="hero in getSuperheroes($select.search) | filter: $select.search">
                  <div ng-bind="hero"></div>
                </ui-select-choices>
              </ui-select>
            </div>
            <label class="col-sm-3 control-label">You have chosen {{ superhero.selected }}!</label>
          </div>
        </div>
      </div>
    </div>
  </body>

</html>

Experience the functional Plunker here

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

Monitor the user's attendance by utilizing two separate for loops

I'm currently developing an angularjs attendance tracking system and I'm facing challenges when it comes to accurately counting the number of days an employee is absent. Despite attempting to solve this issue with two nested for loops, I am still ...

javascriptangularjsfor-loop

Mastering jQuery prior to delving into JavaScript skills

Just a heads up – I'm not here to debate whether learning JavaScript should come before jQuery. I already know that jQuery is built on top of JavaScript, so it makes sense to learn JavaScript first. I have a background in HTML and CSS, but now I wa ...

javascriptjquery

Using dynamic tag names within React JSX can greatly enhance the flexibility and

I'm working on creating a React component for HTML heading tags (h1, h2, h3, etc.), where the heading level is determined by a prop. Here is how I attempted to approach it: <h{this.props.level}>Hello</h{this.props.level}> My expected out ...

javascriptnode.jsreactjsjsx

Concealing UI elements within the primary stack during navigation to a nested stack in React navigation

Is there a way to hide the user interface in my main stack when I switch to the nested drawer stack? I am currently facing an issue where the header from my main stack appears above the header in my nested stack when I navigate to a screen using: navigat ...

javascriptreact-nativereact-navigation

Ways to determine whether a DOM textnode is a hyperlink

Is there a more foolproof method for determining if a DOM textnode represents a hyperlink? The code snippet below currently only checks if the node is directly enclosed in an anchor tag, which may not be sufficient if the <a> element is higher up i ...

javascriptdom

A guide to utilizing ng-model for binding data in table rows for inline editing

I am facing an issue with the getTemplate function in my AngularJS application. I have an object with 3 values empID, empName, empEmail and here is my code: var app = angular.module('myApp' , []); app.controller('myCtrl' , function($ ...

angularjshtml-table

Experiencing Excessive Recursion While Dynamically Attaching Click Event Listener With Post Method to a Div Element

I'm encountering 'too much recursion' errors when trying to dynamically add a click handler to specific div tags with the class name 'reportLink'. Despite successfully logging the innerText of the divs, the code fails when attempti ...

javascriptjqueryajaxrecursionaddeventlistener

Implementing custom fonts in Next.js using next-less for self-hosting

Seeking Solutions for Hosting Fonts in Next.js Application I am exploring the idea of self-hosting a font, specifically Noto, within my Next.js application that already utilizes the @zeit/next-less plugin. Should I rely on the npm package next-fonts to h ...

javascriptreactjslessnext.jsfont-face

Retrieving information from an array and displaying it dynamically in Next.js

I've been diving into the Next.js framework lately and I've hit a roadblock when it comes to working with dynamic routes and fetching data from an array. Despite following the basics of Next.js, I'm still stuck. What am I looking for? I ne ...

javascriptarraysreactjsfetchnext.js

Exploring AngularJS's capabilities with Cross Domain POST requests

One query I have concerning CORS requests that include the HTTP Authorization header: I've noticed that the web browser doesn't seem to send the Authorization header with POST requests, is there a workaround for this? Below is the Angular code ...

javascriptasp.netangularjs

The name 'SafeUrl' cannot be located

I'm working on resolving the unsafe warning in the console by using the bypassSecurityTrustUrl method, but unfortunately, I keep encountering an error. user.component.ts import {Component,OnInit} from '@angular/core'; import { DomSanitizer ...

javascripthtmlangularionic2

Flashing white screen when transitioning between pages on phonegap iOS system

I'm currently using phonegap for my iOS application project. Interestingly, I've noticed a slight white flicker/flash when navigating between pages in the app. To address this issue, I have refrained from using jquery mobile and instead relied ...

javascriptiosxcodecordova

In Typescript with Vue.JS, the type 'Users[]' does not include the essential properties of type 'ArrayConstructor' such as isArray, prototype, from, of, and [Symbol.species]

Embarking on my journey with typescript and vuejs, I stumbled upon a perplexing error that has halted my progress for the past 48 hours. The error message reads as: Type 'Users[]' is missing the following properties from type 'ArrayConstruct ...

javascripttypescriptvue.jssupabase

Enhance Your jQuery Skills by Adding Custom Directories to Anchor Links

Can jQuery be used to add a custom folder name in front of all links on a webpage? For example, if the website has these links: <a href="/user/login">Login</a> <a href="/user/register">Register</a> <a href="/user/forum">Foru ...

javascriptjqueryhtml

Tips for showing and modifying value in SelectField component in React Native

At the moment, I have two select fields for Language and Currency. Both of these fields are populated dynamically with values, but now I need to update the selected value upon changing it and pressing a button that triggers an onClick function to update th ...

javascriptreactjsreact-nativereact-dropdown-tree-select

Guide to using AJAX for the GraphHopper Matrix API

I am struggling to send this JSON with the required information because I keep encountering an error during the request. message: "Unsupported content type application/x-www-form-urlencoded; charset=UTF-8" status: "finished" I'm not sure what I&apos ...

javascriptjqueryajaxgraphhopper

Is it possible to iterate through various values using the same variable name in Mustache.js?

I have data structured in the following way: hello this is {{replacement_data}} and this {{replacement_data}} is {{replacement_data}}. I'm interested in using Mustache to substitute these placeholders with values from an array: [val1, val2, val3. ...

javascripthandlebars.jsmustache

What is the best way to combine the elements within an array with the elements outside of the array in order to calculate their sum?

The goal is to create a function that determines the winner using two input integers. The function should return the first input if it is greater than the second input. function determineWinner(a, b) { let result = [] for (let i = 0; i < 3; i++) ...

javascript

Guide to using the ng-click function in Angular to set focus on the input in the last row of a table

I am in the process of developing a task management application and I am looking to implement a specific feature: Upon clicking 'Add Task', a new row is automatically added to the table (this part has been completed) and the input field within ...

javascriptangularjs

What could be preventing the fill color of my SVG from changing when I hover over it?

I am currently utilizing VueJS to design an interactive map showcasing Japan. The SVG I am using is sourced from Wikipedia. My template structure is illustrated below (The crucial classes here are the prefecture and region classes): <div> <svg ...

javascripthtmlsvgvue.js