Issue with ng-click not functioning in Internet Explorer when selecting an option in AngularJS

I have the following HTML code snippet HTML:

<select style="width: 100%" name="multipleSelect" id="multipleSelect" ng-model="data.multipleSelect" multiple>
    <option ng-click="BRPTab.AddFilesToOpenorDelete(fileName)" ng-repeat="fileName in BRPTab.FileNames">{{fileName}}</option>
</select>

Just to note, BRPTab is being used as an Alias.

Script code:

scope.AddFilesToOpenorDelete = function (FileName) {
        scope.SelectedFiles = [];
        var request = { FileName: FileName };
        scope.SelectedFiles.push(request);
}

This setup works alright on Chrome, but seems to be causing some issues on IE. Any suggestions on how to fix this?

Answer №1

Attempting to use ng-click on the options tag has proven ineffective. It is advisable to utilize the ng-options directive instead, as this will result in cleaner code.

<select style="width: 100%" name="multipleSelect" id="multiSelect" 
  ng-model="selectedFiles" multiple 
  ng-options="file for file in fileList"
  ng-change="updateSelectedFiles(selectedFiles)">
</select>

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

What are some solutions for troubleshooting setInterval issues?

I have a h1 element with a v-for loop that displays items from my array in the following format: <h1 v-for="(record, index) of filteredRecords" :key="index" :record="record" :class="get ...

Having trouble with the JOSN.parse function not functioning properly

Hello there, I'm currently attempting to extract data from a simple JSON string but encountering an error. The object I am trying to retrieve looks like this: { "heading" : "The movies", "box5" : "Click on icon to add text.", "box1" : "At the movies, ...

Building a game using Javascript and a database for a project

I am currently working on developing an online game using a combination of javascript and php. My main objective is to create a seamless, real-time gameplay experience without the need to constantly refresh the page. However, I have encountered a signific ...

Populating inputs dynamically in React.js to receive values

Having recently transitioned to React from React Native, I am faced with a new challenge. I have an array of objects, let's say it contains 5 items. I used the map function to populate views based on the amount of objects, resulting in 5 headings and ...

Guide to automatically clicking a hyperlink using XPath

I am attempting to automatically click a button or a link as soon as the page loads. Currently, I am considering using the Xpath method for this purpose. Here's what I have experimented with so far: document.evaluate('/html/body/div/div[4]/div[2 ...

Tips for removing the y-axis line in ChartJs

How can I hide the y axis line in a bubble chart? I attempted to use the code snippet below but it did not work as expected. yAxes: [{ angleLines: { display: false } }] ...

The content is displayed below the navigation bar rather than beside it

I'm having an issue with the layout of my webpage. The new content I add appears below the navbar on the left side of the page instead of beside it. Can someone help me troubleshoot this problem? Below, you'll find the relevant HTML and CSS code ...

Generating multiple div elements within an AJAX iteration

Currently, I am retrieving data from the server side using AJAX. My goal is to populate data from a list of objects into divs but I am facing an issue where I cannot create the div while inside the foreach loop. $(document).ready(function () { var ...

How can I run a TypeScript function within a JavaScript file?

I am working with a typescript file named file1.ts export function Hello(str: string) { console.log(str); } In addition, I have another file called index.js { require('./some.js'); } Furthermore, there is a script defined in the pack ...

Navigating different domains in ExpressJS - Handling CORS

Currently, I am facing a challenge in setting the domain for a cookie that I am sending along with the response from my ExpressJS implementation. Unfortunately, at the moment, it is only being set to the IP address of where my ExpressJS server is located. ...

Access within the identical window (PHP file) as opposed to an Iframe

I am currently working with a PHP file that retrieves data from my database. <?php $cdb = new PDO('mysql:dbname=xxx;host=localhost', 'xxx', 'xxx'); foreach ($cdb->query("SELECT * FROM images ORDER BY posted DESC LIMIT ...

Ways to verify an NPM package for non-JavaScript code

How can we determine if an npm package consists purely of JavaScript without any bindings or dependencies that require compiling? For instance, the node-speaker package (https://github.com/TooTallNate/node-speaker) requires compilation (mpg321), while req ...

The effectiveness of mouseup and mousemove events diminishes when employed in an external module

Currently, I am immersed in a three.js project that incorporates standard orbit controls on an object, specifically a particle cloud. Everything runs smoothly when this logic is embedded within my root class along with all the three.js code. However, my go ...

The error code TS2554 is triggered when 5 arguments are passed instead of the expected 3-4

I'm utilizing the gsap plugin to craft a captivating text animation effect. As I reached the last line of code in my 'animation_text_1' function, specifically where it states "TweenMax.staggerFromTo(.....)", an error cropped up which read: ...

Using URLs to customize the colors of line graphs in C3.js

I'm currently facing an issue with customizing the colors of my line graph created from JSON data retrieved from a URL. Below is the code snippet I'm using to generate the chart: var chart = c3.generate({ bindto: '#chart', data: { ...

Traverse XML documents using jQuery

I'm facing a challenge with this particular issue. I have multiple XML files labeled by an ID (each XML has its own unique value). My goal is to iterate through these files and display their contents in HTML format. However, the loop starts before t ...

Running `npm install npm` results in encountering gyp ERR and npm ERR

Why am I encountering this peculiar error message when executing sudo npm install npm? This issue seems to crop up occasionally with other modules as well! Error: > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d4a7b7a6ad ...

Having trouble with your onclick event not firing? Utilize jQuery to troub

Struggling to convert a hover trigger to a click event, but for some reason, no click function seems to work? Here is the current code that functions on hover... Current Working Code for Hover... $showSidebar.hover(function() { $wrapper.stop ...

When the `rendered` event is activated in VueJS along with "vue-markdown", the DOM may not be fully prepared yet

Here is the code snippet I am working with: <vue-markdown :source="content" v-on:rendered="afterRenderContent"></vue-markdown> Even after the afterRenderContent method is called, the HTML elements are not yet available. I am looking for a wa ...

Importing a class from a JavaScript file in Typescript: a step-by-step guide

I need help with the following: Importing a js file that defines a class: ./myClass/index.js Declaring the public methods of MyClass (unsure of where to do this, whether in index.ts or another declaration file) Creating a typescript file that exposes the ...