insert data into modal's interface

Question

insert data into modal's interface

I'm encountering an issue with my code, where the modal is not displaying the values inside the brackets as if they were not bound correctly. Everything else in the ng-repeat seems to be working fine, but for some reason the values are not being displayed within the modal window. I have included a snippet of my code below:

<div ng-controller="modalCtrl">
    <script type="text/ng-template" id="modal">
        <div ng-repeat="add in addOn">
            <p>{{add.name}}</p>
            <p>{{add.description}}</p>
        </div>
    </script>
</div>

Upon further investigation, I noticed that when I include {{addOn}} in the HTML code, the entire array is repeated. However, I still cannot access the individual values. Can anyone provide any insights on why this might be happening?

javascript angularjs angular-ui

Answer 1

Answer №1

Using $scope in controller

var modalCtrl=function($scope){
$scope.addOn=[
    {name:'addOne',description:'firstDescription'}
    {name:'addSecond',description:'secondDescription'}
 ]

For more information, visit:
https://docs.angularjs.org/guide/controller

Another way to define your controller:

var myApp = angular.module('myApp',[]);

myApp.controller('modalCtrl', ['$scope', function($scope) {
    // code
}]);

Answer 2

Using $scope in controller

var modalCtrl=function($scope){
$scope.addOn=[
    {name:'addOne',description:'firstDescription'}
    {name:'addSecond',description:'secondDescription'}
 ]

For more information, visit:
https://docs.angularjs.org/guide/controller

Another way to define your controller:

var myApp = angular.module('myApp',[]);

myApp.controller('modalCtrl', ['$scope', function($scope) {
    // code
}]);

insert data into modal's interface

Answer №1

Similar questions

"Combining HTML, PHP, and JavaScript for Dynamic Web

Clicking to remove added child element

I require a breakdown of the JavaScript code, please

Most effective method for detecting null or undefined values

Encountered an issue with locating the module 'webpack-cli/bin/config-yargs' while attempting to run webpack-dev

React JS: The active text object in Fabric JS canvas becomes uneditable after attaching an event listener

Handling Removal of Selected Option in React Material-UI Autocomplete Single Selection

Leveraging Webpack and Jest for seamless module importing in a development project

Generating and saving a text file in a React Native application

How to retrieve a value from an Angular form control in an HTML file

Alert event in JavaScript navigating between different pages

Adjust focus upon the activation of another element or event

Is a catch required for every then statement in AngularJS?

What is the best way to include a non-Typed Angular service in a TypeScript class?

Issue with event not functioning properly on a block inserted through an ajax call

Preserve the specific date and time in the designated timezone

Next.js presents a challenge with double-language applications

Tips on transitioning from Modal1 to Modal2 in Ionic after a successful submit button press?

Unable to transfer an array from getStaticProps method in Next.js

What kind of data type should the value property of Material UI TimePicker accept?