Resolving Scope Values in Angular Modal with UI-Bootstrap

I'm fairly new to Angular and I've successfully added a Bootstrap modal to my project. However, I am struggling to retrieve the value from "programcontroller".

What I need is the id_program from "programcontroller" inside the "ModalInstanceCtrl" controller. I attempted to include it in the RESOLVE, but couldn't access the data.

I managed to extract hardcoded data using RESOLVE from "programcontroller" into the "ModalInstanceCtrl" controller of the modal.

The issue arises when trying to obtain the id_prgram using this snippet:

<input type="text" ng-hide=" true" ng-model="id_program" ng-init="id_program=item._id">

This code block is within an ng-repeat loop and takes time to populate due to its asynchronous nature.

I have included the code for your reference below.

(Include code snippet)

Any assistance would be greatly appreciated. Thank you!

javascriptangularjsangular-ui-bootstrapbootstrap-modal

Answer №1

Attempting to retrieve the filter value before Angular has completed processing it is causing an issue.

Below is the proposed solution:

<ul ng-repeat="it in itm">
<li>
  {{it._id}}
  <input type="text" ng-hide="true" >
  <button type="button" class="btn btn-default" ng-click="setFilter(it._id);open('lg')">Open large modal - {{it._id}}</button>
</li>
</ul>

Controller function:

$scope.setFilter = function (filterValue) {
   $scope.filter = filterValue;

}

Link to the Plunkr example

I hope this information proves helpful!

Answer №2

Try deleting ng-controller="ModalInstanceCtrl" from the code below:

<script type="text/ng-template" id="myModalContent.html">

Then, observe the results.

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

Identify the index of a list item using a custom list created from buttons

When dealing with a dynamically built list like this: <ul id="shortcuts"> <li><input type="checkbox" value="false"/><button>foo</button><button>-</button></li> <li><input type="checkbox" value ...

javascriptjqueryhtml

How to add and append values to an array in a Realtime Database

My React.js app allows users to upload songs to Firebase and view the queue of uploaded songs in order. The queue can be sorted using a drag-and-drop system that updates the database in Firebase. Is there a way to insert these songs into an array when uplo ...

javascriptnode.jsreactjsfirebasefirebase-realtime-database

unable to successfully execute jQuery popup close functionality

I have a button on my mobile site that I want to function as follows: Upon clicking the button, a popup should appear with text and an OK button. When the OK button is clicked, the popup should disappear without affecting the page. My code for this functi ...

javascriptjqueryhtmljquery-mobilepopup

A page that appears blank is produced when using 'style="display:none"'

I am encountering an issue where using style="display:none" on an audio element in my code is causing the entire page to disappear instead of just hiding the audio element. I also tried using style="visibility:hidden" but had the same outcome. There are ...

javascripthtmlreactjs

Performing a validation check on a value upon pressing a button prior to its submission

Hey there! I'm pretty new to React and could use some help with validating a value before using it in my partialRefund function. I want to make sure the value is not empty and is numeric before proceeding with the partialRefund operation. The first ...

javascriptreactjs

Error: Invalid data type detected in cpvlap stats, resulting in termination

I came across a critical error while reviewing the error statistics file. Fatal error: Unsupported operand types in /home1/bestdail/public_html/cpvlap/cpv_lab_install_files/stats.php on line 338 Here is the specific code from line 338: $totalsRow[0] += ...

javascriptjavac#arraysperformance

How to Show or Conceal a list item depending on the value of another variable using angularjs

As someone new to Angular/Ionic, I'm exploring how to manipulate an Ionic list. Specifically, I am attempting to show or hide an item in the list based on a value stored in the item.display variable. The code snippet below demonstrates what I have so ...

angularjsionic-framework

JS: When the 'less than' operator falls short

I am facing an issue with a script that sends an AJAX request every 10 seconds (technically 11) to the user. I have created a simple countdown from 10 to 0 that repeats continuously. The countit function is triggered after each AJAX request to reset the c ...

javascriptajaxintegersetinterval

I'm stumped as to why the React Bootstrap Card isn't appearing on the browser. Despite adding the component, the page remains myster

I'm facing an issue with rendering a reusable Card component on my "Rooms" page. When I run npm start, the Card doesn't appear and upon inspection, it shows dimensions of 0 by 0 pixels. Here is the code snippet: The CardC component code is: impo ...

javascriptarraysreactjsreact-bootstrap

Having trouble posting data in node.js using MongoDB and EJS

Hey everyone, I'm currently working on creating a page with a form and text input fields. However, I'm encountering an error that says "Cannot Post". Here is my code, any help would be greatly appreciated. Why isn't it working? This is app. ...

javascriptnode.jsmongodbexpress

Switch image on click (toggle between pause and play buttons)

Having some difficulty setting up a 3D audio player in A-Frame where the pause and play button images need to change depending on whether the audio is playing or not. Interested in seeing my code in action? Check it out here. ...

javascripthtmlaframe

Executing external middlewares within a user-defined middleware in NodeJS Express

Currently, I am delving into NodesJS Express and utilizing Express-Validator for testing purposes. Below is the code snippet for my testing scenario. const express = require("express"); const app = express(); const port = 5000; let bodyParser = r ...

javascriptnode.jsexpressmiddlewareexpress-validator

What should I choose: HTML with javascript or javascript with JSP?

Greetings, I am a newcomer to the world of dynamic web development. Despite my efforts in searching this site, I was unable to find anything similar to what I'm looking for. My goal is to create a password checker that ensures robustness and sufficie ...

javascriptjavahtmljsp

Creating a system to add and limit dynamic fields with a counter in jQuery

Check out this fiddle link http://jsfiddle.net/gKJEs/80/ I'm looking for a way to limit the number of rows that can be added, let's say up to 5. Here is the HTML code: <table id="table"></table> <button id="addRowBtn">Add Ro ...

javascriptjquery

How to play audio with a source path that includes the special character "%" in JavaScript

Having an issue with playing an audio file that has '%' in its name. I've tried using the tag <audio src="test%320.mp3" controls></audio>, but it seems like the file is not being found when I try to play it. Can anyone ...

javascripthtmlaudio

Importing components in real-time to generate static sites

My website has a dynamic page structure with each page having its unique content using various components. During the build process, I am statically pre-rendering the pages using Next.js' static site generation. To manage component population, I have ...

javascriptreactjstypescriptnext.js

JavaScript for rotating an element upon button click

My webpage design <div id="yabanner"> <img src="img/ok.jpg"> </div> <button>Click Me</button> <button>Click Me</button> <button>Click Me</button> My script code var button = document.getElementsBy ...

javascripthtmldom

utilizing for loop in jQuery

$(document).ready(function() { $for(var i=1;i<8;i++) { $("#"+i).hover(function() { $("#"+i).stop().animate({left:"50px"}); }, function() { $("#"+i).stop().animate({left:"30px"}); }); ...

javascriptjquery

The ng-repeat feature is causing duplicate models to be held when dynamically adding items

I am currently developing a webpage that allows users to dynamically add line items. The framework I am using is AngularJS (v 1.4.7). While I was successful in adding items dynamically to the ng-repeat, I encountered an issue where the modal did not appear ...

angularjsangularjs-ng-repeat

Using jQuery to apply a background image in CSS

Currently, I am attempting to utilize jQuery to set a background image for an HTML element. <div class="rmz-srchbg"> <input type="text" id="globalsearchstr" name="search" value="" class="rmz-txtbox"> <input type="submit" value="& ...

javascriptjqueryhtmlcss