Difficulty in adjusting the view when the scope is modified in ui-select angularjs

<ui-select multiple  ng-model="content.categories"  theme="bootstrap"name="category" on-select="isCategorySelected()" >
       <ui-select-match placeholder="Select Category"> 
          {{ $item.label }} 
       </ui-select-match>
             <ui-select-choices repeat="category.value as category in categories | filter: {label: $select.search}">
                    <div ng-bind-html="category.label | highlight: $select.search"></div>
             </ui-select-choices>
 </ui-select>

This HTML code displays a multi select dropdown list with different categories.

  $scope.categories = [
    { label: 'Action', value: 'action' },
    { label: 'Adventure', value: 'adventure' },
    { label: 'Comedy', value: 'comedy' },
    { label: 'Crime', value: 'crime' },
    { label: 'Faction', value: 'faction' },
    { label: 'Fantasy', value: 'fantasy' },
    { label: 'Historical', value: 'historical' },
    { label: 'Horror', value: 'horror' },
    { label: 'Mystery', value: 'mystery' },
    { label: 'Paranoid', value: 'paranoid' },
    { label: 'Philosophical', value: 'philosophical' },
    { label: 'Political', value: 'political' },
    { label: 'Realistic', value: 'realistic' },
    { label: 'Romance', value: 'romance' },
    { label: 'Saga', value: 'saga' },
    { label: 'Satire', value: 'satire' },
    { label: 'Science fiction', value: 'sciencefiction' },
    { label: 'Slice of Life', value: 'sliceoflife' },
    { label: 'Speculative', value: 'speculative' },
    { label: 'Thriller', value: 'thriller' },
    { label: 'Urban', value: 'urban' }
];

This is my JavaScript code that defines and populates the categories array.

$scope.content.categories = ['action'];

The above snippet should update the view when an item is selected, but it's not working properly. Please assist me in resolving this issue.

javascriptangularjs

Answer №1

You may encounter an error in the console saying action is not defined. To resolve this, simply wrap it in quotes.

$scope.content.categories = ['action'];


var app = angular.module('app', ['ui.select', 'ngSanitize']);

app.controller('myController', function($scope) {

  $scope.content = {};
  $scope.content.categories = ['action'];

  $scope.setAdventure = function() {
    $scope.content.categories = ['adventure'];
  };

  $scope.pushComedy = function() {
    if ($scope.content.categories.indexOf('comedy') === -1) {
      $scope.content.categories.push('comedy');
    }
  };


  $scope.categories = [{
    label: 'Action',
    value: 'action'
  }, {
    label: 'Adventure',
    value: 'adventure'
  }, {
    label: 'Comedy',
    value: 'comedy'
  }, {
    label: 'Crime',
    value: 'crime'
  }, {
    label: 'Faction',
    value: 'faction'
  }, {
    label: 'Fantasy',
    value: 'fantasy'
  }, {
    label: 'Historical',
    value: 'historical'
  }, {
    label: 'Horror',
    value: 'horror'
  }, {
    label: 'Mystery',
    value: 'mystery'
  }, {
    label: 'Paranoid',
    value: 'paranoid'
  }, {
    label: 'Philosophical',
    value: 'philosophical'
  }, {
    label: 'Political',
    value: 'political'
  }, {
    label: 'Realistic',
    value: 'realistic'
  }, {
    label: 'Romance',
    value: 'romance'
  }, {
    label: 'Saga',
    value: 'saga'
  }, {
    label: 'Satire',
    value: 'satire'
  }, {
    label: 'Science fiction',
    value: 'sciencefiction'
  }, {
    label: 'Slice of Life',
    value: 'sliceoflife'
  }, {
    label: 'Speculative',
    value: 'speculative'
  }, {
    label: 'Thriller',
    value: 'thriller'
  }, {
    label: 'Urban',
    value: 'urban'
  }];

});
body {
  padding: 15px;
}
.select2 > .select2-choice.ui-select-match {
  /* Due to Bootstrap being included */
  height: 29px;
}
.selectize-control > .selectize-dropdown {
  top: 36px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-sanitize.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.12.0/select.js"></script>

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.12.0/select.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.default.css">

<div ng-app='app' ng-controller='myController'>
  <button ng-click="setAdventure()">setAdventure</button>
  <button ng-click="pushComedy()">pushComedy</button>
  {{ content.categories }}

  <ui-select multiple ng-model="content.categories" theme="bootstrap" name="category" on-select="isCategorySelected()" style="width: 300px;">
    <ui-select-match placeholder="Select Category">
      {{ $item.label }}
    </ui-select-match>
    <ui-select-choices repeat="category.value as category in categories | filter: {label: $select.search}">
      <div ng-bind-html="category.label | highlight: $select.search"></div>
    </ui-select-choices>
  </ui-select>
</div>

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

Show the selection of form in a div using React

I am currently working on developing a user interface that dynamically updates based on the selection made by the client in a dropdown menu. The structure I have set up includes a React Parent component named App that renders two child components called In ...

javascripthtmlformsreactjs

Removing a cookie in Javascript - step by step guide

Cookie Conundrum: I've encountered a curious scenario involving browser cookies. After entering an invalid login ID, an unauthorized cookie appears on my HTML page. Despite my attempts to display and expire the cookie, it stubbornly remains persistent ...

javascriptcookies

The JUnitXmlReporter from jasmineReporters is failing to produce an XML report

I am facing an issue with the JunitXML reporter as it is not generating the xml file. I execute the test using 'protractor example-test.js' command, but even though there are no errors, the file is not being generated. Can someone please assis ...

angularjsseleniumtestingprotractorautomated-tests

Modifying the CSS properties of elements with identical IDs

Encountering an issue while attempting to modify the CSS property of elements with similar IDs using JavaScript. Currently, running a PHP loop through hidden elements with IDs such as imgstat_1, imgstat_2, and so forth. Here is the code snippet being emp ...

phpjavascript

Return empty parameters for nested routes efficiently

Here is an example of my situation: localhost:8000/api/news?category=tech At the moment, I have a router set up for the /api section and another one specifically for /api/news. However, when I attempt to display req.params in the /api/news router, it doe ...

javascriptexpress

Tips for optimizing re-rendering in Redux when a single state changes to avoid unnecessary updates in other components

I recently completed a React project that utilizes Redux for state management. In this project, I have implemented two different states stored in the same reducer and accessed by separate components. However, I've encountered an issue where changing t ...

javascriptreactjsreduxrender

Adding individual flag icons for each country in your Datatables can be a significant enhancement to

Below is the code snippet in JavaScript with flags: <script type="text/javascript"> $(document).ready(function() { var dataTable = $("#example").DataTable( { processing: true, bSort: false, ...

javascriptphpajax

Need help with extracting the session ID, 'simpSessionId', from a Spring Boot controller?

Front end : Angular Back end : Spring boot After successfully obtaining the simpSessionId using EventListeners like SessionConnectEvent and SessionDisconnectEvent, I face the challenge of retrieving it once the Stomp session is connected. My goal is to ...

angularjsspring-bootwebsocketstompspring-session

Pass the extended object from the service to the controller within a promise using the .map function

section: I am currently working on extending a JSON object within a service and passing it to a controller. The JSON originally came to the service from another service that makes backend calls. The code is quite intricate, so I've added comments an ...

javascriptangularjsjsonpromise

Importing .js files from the static folder in Nuxt.js: a step-by-step guide

I'm in the process of transitioning my website, which is currently built using html/css/js, to Nuxt.js so that I can automatically update it from an API. To maintain the same website structure, I have broken down my code into components and imported ...

javascriptcssvue.jsimportnuxt.js

Code remaining stable post-execution of promise

I'm facing a problem with my Node.js application where I'm using promise-mysql and bluebird packages to make calls to a MySQL database. Despite following tutorials and successfully querying the database, I keep encountering a timeout error. The p ...

javascriptmysqlnode.jslambdapromise

Managing location markers with Google Maps API V3: Saving and removing locations

I encountered an issue while using GMAP V3. After realizing the need to save map changes in a database, I struggled to find a way to accomplish this task. Before attempting any workarounds, I thought it would be best to gather some ideas first. The communi ...

javascriptajaxgoogle-maps

Is there a way to adjust the quantity of items in the shopping cart without the need to reload the webpage?

Currently, I am working on a test project using React & Redux. The project involves implementing a basket feature where I receive an array of products structured like this: products: [ { name: "Product one", count: 1, ...

javascriptreactjsreduxreact-reduxjsx

What is the best way to link a variable to the content of my HTML input using jQuery?

When working with a form that uses the post method, there is often a need to encrypt certain parameters using md5 before posting them in JavaScript. How can I bind these encrypted values to the form? Here is an example of an HTML form: <input id="sig" ...

javascriptjqueryhtml

Extracting information from the fileuploadfield in Ext JS 3

Currently utilizing Ext.ux.FileUploadField within Ext JS 3.3.1. Aiming to retrieve the file data from the form without having to submit it. Wondering if anyone has insight on whether this is feasible. Currently able to view the filename but not the actual ...

javascriptfile-uploadextjsextjs3

Using focusout and clicking buttons do not effectively interact with child elements

I have a series of div elements, each containing a button. When I click on a button, text is displayed, and when I click away, the information hides with a focus-out function. If I have one button open and then want to click on another parent button, it wo ...

javascriptjqueryhtml

Starting a map in typescript

When attempting to initialize the following Map in typescript, I noticed that it appears empty when printed out. let map: Map<string, object> = new Map<string, object> ([ [ "api/service/method", { uriPath: {} ...

javascripttypescript

There appears to be an issue with displaying the graph

I am having trouble understanding how to transfer the values entered in the input to the graph that is displayed successfully. Although the update seems correct, nothing changes when I try to update it and the data remains stagnant. Page.vue <script&g ...

javascriptvue.jsvuejs2chart.js

Express.js error: net connection closed

I have a Universal Javascript application deployed on Heroku. In my setup, Express.js is loading my Vue.js app and proxying requests to https://localhost:3000/api. However, when I try to send a simple POST request to an endpoint, the Chrome console displ ...

javascriptexpressherokuvue.js

Using webGL for rendering drawElements

I am working with face-indices that point to specific points to draw triangles in a loop. Unfortunately, when executing my code, I encountered the following error in the web console: WebGL: drawElements: bound element array buffer is too small for given c ...

javascriptwebgl