Why is ng-click not triggering within ng-repeat?

I currently have the code snippet below:

    scope.monthpickerclick = function(scope){
    $window.alert('test'); 
        console.log(scope);
    };
scope.monthpicker = function(alldatesdumparray){

var alldatesdump = booking.getalldates();
var alldatesdumparray = $.map(booking.getalldates(), function(value, index) {
    var dropdates = new Date(value.date);
    var dropdate = dropdates.getDate();
    var month=new Array();
month[0]="January";
month[1]="February";
month[2]="March";
month[3]="April";
month[4]="May";
month[5]="June";
month[6]="July";
month[7]="August";
month[8]="September";
month[9]="October";
month[10]="November";
month[11]="December";
    var dropmonth = month[dropdates.getMonth()];
    var checkmonth = dropdates.getMonth();
    var dropyear = dropdates.getFullYear();
    var joindates = dropmonth + '-' + dropyear;
    var monthyear = checkmonth + '- '
    var today = new Date();
    var mm = today.getMonth(); //January is 0!
    var yyyy = today.getFullYear();

    if(mm < checkmonth && dropyear < yyyy){

    }else{
        value.date = joindates;
        value.month = checkmonth;
        value.Year =  dropyear;
        return [value];
    }
});
//console.log(alldatesdumparray);
    var dupes = {};
    var singles = [];
$.each(alldatesdumparray, function(i, el) {
    if (!dupes[el.date]) {
        dupes[el.date] = true;
        singles.push(el);
        return singles;
    }
});
return singles;
};

Associated HTML code: 

<select >
<option ng-click="monthpickerclick()" class="animate-repeat" ng-repeat="returnpicker in monthpicker(singles)" value="{{returnpicker.date}}">{{returnpicker.date}}</option>
</select>

This will output the following:

<select>
    <!-- ngRepeat: returnpicker in monthpicker(singles) -->
    <option ng-click="monthpickerclick()" class="animate-repeat ng-scope ng-binding" ng-repeat="returnpicker in monthpicker(singles)" value="January-2014">January-2014</option>
    <option ng-click="monthpickerclick()" class="animate-repeat ng-scope ng-binding" ng-repeat="returnpicker in monthpicker(singles)" value="February-2014">February-2014</option>
    <option ng-click="monthpickerclick()" class="animate-repeat ng-scope ng-binding" ng-repeat="returnpicker in monthpicker(singles)" value="March-2014">March-2014</option>
    <option ng-click="monthpickerclick()" class="animate-repeat ng-scope ng-binding" ng-repeat="returnpicker in monthpicker(singles)" value="April-2014">April-2014</option>
    <option ng-click="monthpickerclick()" class="animate-repeat ng-scope ng-binding" ng-repeat="returnpicker in monthpicker(singles)" value="May-2014">May-2014</option>
    <option ng-click="monthpickerclick()" class="animate-repeat ng-scope ng-binding" ng-repeat="returnpicker in monthpicker(singles)" value="June-2014">June-2014</option>
    <option ng-click="monthpickerclick()" class="animate-repeat ng-scope ng-binding" ng-repeat="returnpicker in monthpicker(singles)" value="July-2014">July-2014</option>
    <option ng-click="monthpickerclick()" class="animate-repeat ng-scope ng-binding" ng-repeat="returnpicker in monthpicker(singles)" value="August-2014">August-2014</option>
    <option ng-click="monthpickerclick()" class="animate-repeat ng-scope ng-binding" ng-repeat="returnpicker in monthpicker(singles)" value="September-2014">September-2014</option>
    <option ng-click="monthpickerclick()" class="animate-repeat ng-scope ng-binding" ng-repeat="returnpicker in monthpicker(singles)" value="October-2014">October-2014</option>
    <option ng-click="monthpickerclick()" class="animate-repeat ng-scope ng-binding" ng-repeat="returnpicker in monthpicker(singles)" value="November-2014">November-2014</option>
    <option ng-click="monthpickerclick()" class="animate-repeat ng-scope ng-binding" ng-repeat="returnpicker in monthpicker(singles)" value="December-2014">December-2014</option>
</select>

Despite the appearance that everything should be working fine, the issue remains of why does monthpickerclick() not execute when selecting an option? Chris

javascriptangularjs

Answer №1

It is crucial to connect these functions to the select element instead of the option and utilize ng-change

<select ng-change="monthPickerClick()" >
    <option class="animate-repeat" ng-repeat="returnpicker in monthpicker(singles)" value="{{returnpicker.date}}">{{returnpicker.date}}</option>
</select>

Edit: Incorporating your suggestion

<select ng-change="monthPickerClick()" ng-model="myItem">
    <option class="animate-repeat" ng-repeat="returnpicker in monthpicker(singles)" value="{{returnpicker.date}}">{{returnpicker.date}}</option>
</select>

$scope.$watch('myItem', function(){
    //do something
});

Second Edit:

<select ng-change="monthPickerClick()" ng-model="myItem" ng-init="savedReturnPicker=[]">
    <option class="animate-repeat" model="savedReturnPicker[returnpicker.date]" ng-repeat="returnpicker in monthpicker(singles)" value="{{returnpicker}}">{{returnpicker.date}}</option>
</select>

//save the returnPicker to a model called savedReturnPicker, then look up with $scope.savedReturnPicker[someDateGoesHere}

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

I am encountering an issue with the Bootstrap collapse functionality in my React application

My react app is encountering issues with the Bootstrap collapse feature. I am in need of the collapse functionality for my app, but it seems to not be functioning properly within my react app. The Bootstrap classes seem to be working fine, but the onclic ...

javascriptcssreactjsbootstrap-4react-bootstrap

Web application error: Karma and Webpack cannot locate Angular controller

After following a blog post on setting up an Angular project with webpack, I used an associated boilerplate on Github. Although the app is functioning properly, Karma seems to have trouble finding the controller it needs to test. // karma.config.js modul ...

javascriptangularjskarma-runnerwebpack

I'm having trouble with res.redirect, why isn't it redirecting me as expected?

In my login controller, I have a form that updates the user's scope when they click a button triggering the login() function. .controller('loginCtrl', ['$scope','$http',function($scope,$http) { $scope.user = { ...

javascriptangularjsnode.jsexpresspassport.js

An error occurred with the authorization headers when attempting to retrieve the requested JSON

I am attempting to retrieve JSON data from the Bing Search API. Here is what I have implemented: <!DOCTYPE html> <html> <body> <p id="demo"></p> <script language="JavaScript" type="text/javascript" src="jquery-1.12.3.js"& ...

javascriptjqueryjson

Display information in a paginated format using components

As a newcomer to React, I may use the wrong terms so please bear with me. I am attempting to implement pagination for an array of components. To achieve this, I have divided the array into pages based on the desired number of items per page and stored eac ...

javascriptreactjs

I would like to automatically log out when closing the tab in Mozilla, Internet Explorer 8.0, or Chrome

Hello there, I was wondering if it's feasible to end the session and log out when I close my tab. I'd appreciate it if you could confirm whether this feature has been implemented on your end. Thank you, Manish ...

phpjavascripthtml

What is the best method to fetch data from a phpMyAdmin table using AngularJS $http?

I'm able to send data to the table, but retrieving data seems to be an issue. I've tried the following code in an attempt to display table details on an HTML page. However, I can't seem to figure out why this code isn't functioning prop ...

phpangularjs

An async awaitCurrentBlock() function encountered an unexpected identifier while executing my JavaScript file

Encountering a problem while trying to execute my compile.js file using node compile.js. Here's my code: const async = require('asyncawait/async'); const await = require('asyncawait/await'); const HDWalletProvider = require(&apos ...

javascriptnode.jsasync-awaitsyntax-error

Is it possible to use square brackets in conjunction with the "this" keyword to access a class property using an expression?

export class AppComponent implements OnInit { userSubmitted = false; accountSubmitted = false; userForm!: FormGroup; ngOnInit(): void {} onSubmit(type: string): void { this[type + 'Submitted'] = true; if(this[type + 'For ...

javascriptangulartypescript

What is the process for adjusting the form transition?

I am currently working on a form that has a transition effect However, I encountered an issue: check out the problem here My goal is to keep the magnifying glass fixed in place while the form moves Here is a snippet of my code: import Search fro ...

javascriptnext.jstailwind-css

Using Ng-options in AngularJS to populate a select dropdown with an array of arrays

I'm encountering an issue with displaying options from an array of arrays in a select dropdown. Can someone point out what I might be doing wrong? Check out my code here: https://plnkr.co/edit/HMYbTNzkqkbAGP7PLWWB?p=preview Here's the HTML snipp ...

javascriptarraysangularjsangularjs-ng-optionsangularjs-select

Using arrays to pass parameters in JavaScript

I have multiple sliders that require the same set of parameters to be passed to each one. My understanding is that I need to use an array for this purpose. However, as a JavaScript novice, I am unsure of the correct way to implement it. The parameters lo ...

javascriptjqueryhtmlarraysvariables

What is the best way to implement a total request timeout or decline requests in Node.js while utilizing the cluster module?

Is there a way to set timeouts that start counting when the request hits the socket in Node.js? server.requestTimeout = 1; server.keepAliveTimeout = 1; server.timeout = 1; server.setTimeout(1); It may seem easy at first glance, but it's not that simp ...

javascriptnode.jstcp

Leveraging orWhere in the bookshelf JavaScript object

I encountered an issue while using bookshelf js to create a query. When implementing orWhere in the query, I received an error message. An error occurred stating 'Object has no method 'orWhere'." Below is the code snippet that led to thi ...

javascriptnode.jsbookshelf.jsknex.js

Upon invoking the useEffect function, the default value can be seamlessly established within the input field of the antd library

I have a function called loadProfile that I need to execute within the useEffect hook. When this function is triggered, I want the name Mario to be automatically displayed in the input field labeled name. How can I set this default value using the antd lib ...

javascriptreactjsantd

Guide on leveraging a private GitHub repository as a yarn dependency without installing internal dependencies

Recently, I have been attempting to incorporate a private GitHub repository as a dependency within multiple repositories at my workplace. Within the primary package.json file, our dependency is outlined as follows: "mycompany-models": "https://github.com ...

javascriptnode.jsgithubnpmecmascript-6

The process of overriding CSS applied through JavaScript

I am using a third-party multi-select dropdown. Similar to Select2, the multi-select dropdown is created using JQuery with select2.min.js and the width of the dropdown is automatically calculated. Is there any way to apply static width to it, as I believe ...

javascripthtmljquerycss

Creating a replica of a Parse Server object

I've been struggling to clone Parse objects without affecting the original ones. Despite trying various methods like Parse.Object.clone() and converting to JSON, I haven't found a working solution. I came across some recommendations online but no ...

javascriptparse-platformparse-server

Stop the replication of HTML/CSS styles during the extraction of content from a div

Is there a way to prevent the copying of CSS properties, such as font styles and sizes, when content is copied from a div? I want only the plain text to be copied to the clipboard, without any formatting applied. ...

javascripthtmlcss

Use JavaScript to limit Google Analytics and Yandex.Metrica to track only the referral sources and screen sizes

I prefer not to include external JavaScript on my website for unnecessary tracking purposes. However, I do need to gather referrer and screen size information, which cannot be achieved with a regular HTML img tag alone. What is the most standard-complian ...

javascripthtmlcssgoogle-analyticsyandex-api