AngularJS: Issue with Select Click Trigger Not Fired

Question

AngularJS: Issue with Select Click Trigger Not Fired

I am puzzled as to why this code isn't working on Chrome but works perfectly fine on FireFox

SelectModel

selectModel: [
                        {
                            value: "asc", htmlText : "A-Z", selected: ""
                        },
                        {
                            value: "desc", htmlText : "Z-A", selected: ""
                        },
                        {
                            value: "startDate", htmlText : "Date", selected: ""
                        }
                    ]

html

<option ng-click="sortContent(item)" ng-selected="item.selected" class="sort_option" value="{{item.value}}" ng-repeat="item in selectModel">
        {{item.htmlText}}
</option>

========================================================================= Directive:

return {
    restrict: 'E',
    replace: true,
    scope: {
    },
    link: function (scope, element, attributes) {
    scope.sortContent =  function(item_){
            console.info("???????????????????????????????????????????????????????????????????????????????")
        }
}

The issue lies in the fact that the function doesn't seem to be triggering on Google Chrome

You can test it out here: Runs smoothly on FireFox, but not on Chrome _ https://jsfiddle.net/bt6hmbvf/1/

javascript angularjs google-chrome

Answer 1

Answer №1

The solution is straightforward. The reason why Ng-click doesn't function within the <option> element is because it is designed to work within the <select> element. I encountered a similar issue just a couple of days ago.

You can find my updated version with the fix at this link.

Answer 2

The solution is straightforward. The reason why Ng-click doesn't function within the <option> element is because it is designed to work within the <select> element. I encountered a similar issue just a couple of days ago.

You can find my updated version with the fix at this link.

Answer 3

Answer №2

Try using ng-app ="myApp" to solve the issue mentioned in your provided fiddle

Here is the example with an error: http://jsfiddle.net/kevalbhatt18/bt6hmbvf/

Check out this demo instead: https://jsfiddle.net/kevalbhatt18/bt6hmbvf/4/

<div ng-app ="myApp" ng-controller="MyCtrl"> {{d}} </div>

Edit:

Take a look at this example: https://jsfiddle.net/hk0tn0co/3/

In your updated fiddle, you need to add ng-change to the select element and also include ng-model as it is required when using ng-change

<div ng-app="myApp" ng-controller="MyCtrl">
    <sampdir>
        {{msgClick}}
        <select ng-change="sortContent(item.value)" ng-model="item.value">
           <option  ng-selected="item.value" class="sort_option" value="{{item.value}}" ng-repeat="item in selectModel" >
                        {{item.htmlText}}
                    </option>
                </select>        
    </sampdir>
</div>

Answer 4

Try using ng-app ="myApp" to solve the issue mentioned in your provided fiddle

Here is the example with an error: http://jsfiddle.net/kevalbhatt18/bt6hmbvf/

Check out this demo instead: https://jsfiddle.net/kevalbhatt18/bt6hmbvf/4/

<div ng-app ="myApp" ng-controller="MyCtrl"> {{d}} </div>

Edit:

Take a look at this example: https://jsfiddle.net/hk0tn0co/3/

In your updated fiddle, you need to add ng-change to the select element and also include ng-model as it is required when using ng-change

<div ng-app="myApp" ng-controller="MyCtrl">
    <sampdir>
        {{msgClick}}
        <select ng-change="sortContent(item.value)" ng-model="item.value">
           <option  ng-selected="item.value" class="sort_option" value="{{item.value}}" ng-repeat="item in selectModel" >
                        {{item.htmlText}}
                    </option>
                </select>        
    </sampdir>
</div>

AngularJS: Issue with Select Click Trigger Not Fired

html

Answer №1

Answer №2

Similar questions

Methods for showcasing Array values by utilizing a timeout function

A DOM-injected element will not initiate its own directive

angular click triggers the following content

I am trying to understand why my React component's render function is being called twice - first without any data and then again with data, resulting in a

After executing grunt serve, Bower issues a warning for jquery stating "not injected"

Encountering HTML content error when attempting to log in with REST API through Express on Postman

Recording the screen with electron and utilizing the angularJS framework

Tips for adjusting the size of an SVG using percentages

What is the best way to populate a dropdown with a specific value by retrieving the ID from the database?

Connect the <div> element to the Angular controller's element

Retrieving the text or value of an ASP.NET label using JavaScript

Instructions for deleting a class from the body with jQuery while incorporating AngularJS

Immersive bootstrap 4 card featuring dynamic highcharts

Enhancing React components with dynamic background colors for unique elements

Using AngularJS promises within a loop

How can I create an HTML select dropdown menu with a maximum height of 100% and a dynamic size?

Issues with Chrome when using Selenium and Codeception

What approach can be taken to establish a dependency between an AngularJS controller and a value that is retrieved through ajax and loaded onto the root

What steps are required to insert additional tags into select2?

"Typescript: Unraveling the Depths of Nested