Utilizing Angular UI Bootstrap DatePicker Popup in Conjunction with ng-repeat

<div class="task-manager_block" ng-controller="ToDoCtrl">
    <div class="form_block clearfix">
        <form name="addToDo">
        <input class="add-input" placeholder="I need to..." type="text" name="inputToDo" ng-model="formTodoText" ng-model-instant ng-minlenght ng-minlength="5" ng-maxlength="40" ng-required="true"/>
        <button class="add-btn" ng-click="addTodo()" ng-disabled="! addToDo.inputToDo.$valid "><h2>Add</h2></button>
      </form>
    </div>
    <div class="tasks_block" ng-controller="DatepickerPopupCtrl">
        <div class="task_block col-md-3" ng-repeat="todo in todos">
            <div class="text_block">
                <p class="input-group">
          <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup{{$index}}.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
          <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="open1($index)"><i class="glyphicon glyphicon-calendar"></i></button>
          </span>
        </p>
                <p>{{todo.text}}</p>
            </div>
        </div>      
    </div>
</div>

I want each popup to open individually when clicked on, instead of all opening at once. How can I achieve this functionality?

Answer №1

The reason for this issue is that all the datepickers inside ng-repeat are referring to the same variable to determine their open state.

Take a look at this:

is-open="popup1.opened"

To resolve this, you need to manage the state in a separate object.

For instance, declare an empty object in the controller:

let datePickersStat = {};

Then, in your HTML, you can use anything as the object key as long as it is unique.

is-open="datePickersStat[todo.id]"

I hope that clarifies things for you.

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

Incorporating a hyperlink into an Iframe triggered by Fancybox2-AJAX, specific to the Iframe's unique identifier

One thing I have noticed is that everything seems to be working fine up until the point where I try to load it through fancybox via AJAX. An example of it working statically: <iframe id="videourl1" width="640" height="340" src="" frameBorder="0">& ...

What is the best way to dynamically change the content of a div based on user selection?

When a user selects an option in the HTML, I want to display another div set to Block. I tried putting the OpenAskuser() function in a button, but it didn't work either. It would be ideal if we could achieve this without a button. Just have the displ ...

Using a PHP variable to trigger the jQuery .show() function

I'm attempting to trigger jQuery .show() events based on PHP variables. Below is my PHP code (retrieved from a form submission on another page): $last_pic_displayed = trim($_POST["last_pic_displayed"]); if (strlen($last_pic_displayed) <= ...

Is there a way to trigger the activation of the datepicker during the `onLoad` event?

For my project, I am utilizing this datepicker. While I am familiar with using scripts to handle changes in the date value, I am unsure of how to implement it on page load. $('.date_set .date').datepicker({ startView : 0, ...

JavaScript button click changes the selected row's color in a DataTable

I am looking to dynamically change the color of a row in my Datatable when a specific button is clicked. Here is the HTML code snippet for the rows: <tr role="row" class="odd"></tr> <tr role="row" class="even selected"></tr> & ...

Oops! It seems that caching was forgotten to be configured, causing an error with Babel's plugins after installing Font Awesome on my React app

I wanted to incorporate Font Awesome into my React application, but encountered an error after installing the npm package for Font Awesome: Error: Caching was left unconfigured. Babel's plugins, presets, and .babelrc.js files can be configured for v ...

invoking a Java function from JavaScript

I need assistance with calling a Java method from JavaScript, where the Java class is located on the server side. Here is an example of the Java code: public class deleteconfig { static boolean check = true; public static void initiate() { chec ...

Setting a unique identifier for a newly created element in JavaScript and the DOM

Is there a way to assign an element ID to a newly created element using JavaScript DOM? The code I've written generates a table that is displayed when a button is clicked. I'm looking to give this table a unique ID so it can have a distinct sty ...

Connecting to the grunt server is currently not possible

const config = require('path/to/config'); module.exports = function(grunt) { // Project configuration. grunt.initConfig({ server: { port: config.port, base: config.base } }); }; C:\Program Files&bsol ...

Error encountered in onclick handler due to unterminated string literal in PHP and jQuery

Trying to utilize PHP to send variables into the onclick of an element is resulting in an "Unterminated string literal" error due to long strings. Below is a snippet of my PHP code: $query = $conn->prepare("SELECT Name, Image, Description, Link, Price, ...

The save functionality is not working due to a JavaScript issue

Having an issue with the save button functionality. The JavaScript code specified for the button seems to interfere with its ability to save information. Interestingly, when I remove the JavaScript it works perfectly and saves the data as intended. (fun ...

Tips for creating a conditional confirm dialog box in Asp.net using JQuery/Javascript

I have some jQuery and traditional JavaScript mixed together to validate a textbox on my ASP sample page. There is a button, a textbox, and a button_click event in the code behind. When the button is clicked, I want to show an alert if the textbox is empty ...

Special characters cause Ajax post to malfunction

My goal is to pass the content of a textarea to a PHP page for processing and storing in a SQL database. I need the textarea to handle special characters without any issues. However, when I input the following string into the textarea and submit it: J ...

What is the method to obtain the selector string for an HTML node element?

Essentially, my goal is to extract the selector string from an HTML element. Specifically, I want to start with the HTML element and retrieve its selector string (for example: button#myButton) function onclicked(e){ console.log(e.target); // This returns ...

The jQuery click event to change the color function is functioning properly, but there seems to be an issue with

I'm having trouble changing the font-family using the code below, even though the color is changing properly. What am I missing here and how can I correct it? $(document).ready(function(){ $("body").on("click",".selectableColor", function(){ ...

Tips for effectively utilizing nodejs soap

Here's the code snippet I've been working on: soap.createClient(url, function(err, client) { if(err) { res.status(500); return res.send(err); } client.GetMemberPIN({pUserName: 'r'}, function(error, result) { if(erro ...

What is the best way to add a script into my build directory as a standalone file?

I've been developing a Chrome extension that relies on a background script (background.js). Right now, whenever I run npm build, the project is built in the usual way with all files ending up in the build folder. After that, I manually copy and paste ...

JavaScript following an AJAX request

Similar Question: Obtain dates with JavaScript before AJAX request I'm facing an issue with my Ajax Request implementation: function ajaxrequest(str){ var aircraft = $("#resultdiv"); aircraft.load("./other_file.php?icao="+str, funct ...

Is it necessary to specify the inputs property when defining an Angular @Component?

While exploring the Angular Material Button code, I came across something interesting in the @Component section - a declared inputs property. The description indicates that this is a list of class property names to data-bind as component inputs. It seems ...

Run Javascript code if a specific CSS class is present on an element

Whenever a user enters an incorrect value into a textbox on my page, an error message is displayed within a div with the class 'validation-errors'. I'm looking for a solution to trigger a javascript function (which adds a CSS property to a ...