Issue with displaying bound value in AngularJS textbox

Hello! I am currently working on an AngularJS application and have encountered a puzzling issue. I am attempting to bind a value to a textbox using the following code:

<ul>
    <li ng-repeat="screen in screenMap">
        <input type="text" ng-model="screenname" value="{{screen.scrn_name}}" />
    </li>
</ul>

Even though the value is successfully bound when inspecting the elements in the browser console, the textbox itself does not display any value. Here is an example of the bound value:

 <input type="text" ng-model="screenname" value="USerProfile" class="ng-pristine ng-untouched ng-valid">

I would appreciate any insights on why the value is not appearing in the textbox. Thank you for your help!

javascriptangularjs

Answer №1

Utilize ng-value,

<input type="text" ng-model="screenname" ng-value="screen.scrn_name" />

EXAMPLE 

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
   $scope.screenMap = [{
  "id": 1,
  "scrn_name": "Redhold"
}, {
  "id": 2,
  "scrn_name": "Solarbreeze"
}];
});
<!DOCTYPE html>
<html>

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

  <div ng-app="myApp" ng-controller="myCtrl">
   <ul>
  <li ng-repeat="screen in screenMap">
  <input type="text" ng-model="screenname" ng-value="screen.scrn_name" />
  </li>
  </ul>
    
  </div>
  
</body>

</html>

Answer №2

You're so close! In Angular, the model is synonymous with the value.

If you use 

<input type="text" ng-model="screen.scrn_name" />
, you should be good to go.

Answer №3

Having ng-model set to "your_value", I believe it should function as intended.

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

Utilizing RequireJS with Laravel 4

I am trying to use require js and laravel to manage the assets directory. I have placed the require.js file in the assets/js directory, along with main.js. The main.js file contains: require.config({ baseURL: '', paths: { userPre ...

javascriptlaravelrequirejslaravel-4

Customizing Body Color in CKEditor for Dynamic Designs

I am facing an issue with CKEditor that I am hoping to find a solution for. My scenario involves using a jQuery color picker to set the background color of a DIV element, which is then edited by the user in CKEditor. However, I have observed that it is not ...

javascriptjquerycssckeditor

Transforming a div into a clickable hyperlink

I have a JavaScript function that generates a div with a link inside it. Here is how the div and link are created: $('#info').find('#link').text("View"); //Creates a new link var eventLink1 = document.createElement('a& ...

javascriptjqueryhtml

Maintain synchrony of the state with swiftly unfolding occurrences

I developed a custom hook to keep track of a state variable that increments based on the number of socket events received. However, when I tested by sending 10 simultaneous events, the total value of the state variable ended up being 6, 7, or 8 instead of ...

javascriptreactjstypescriptsocketsreact-hooks

Class for making elements draggable using jQuery UI

Is it possible to use jQueryui's draggable/droppable combo and add a class to the dragged item when dropped into a specific container, rather than adding a class to the container itself? I've tried adding a class to the container, but that is not ...

javascriptjquerycssjquery-ui

Error message: "An issue occurred with the Bootstrap Modal in

I've designed an AngularJS app like so: <!DOCTYPE html> <html ng-app="StudentProgram"> <head> <title>Manage Student Programs</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2. ...

javascriptjqueryhtmlangularjstwitter-bootstrap

Is it possible to exclusively target a child div using JavaScript in CSS, without affecting the parent div?

I'm in the process of developing a calendar feature where users can select a specific "day" element to access a dropdown menu for time selection. The functionality is working fine, but I've encountered an issue. When a user selects a time from th ...

javascripthtmlcss

Can two different versions of ReactJS run simultaneously on a single page?

Hey everyone, I'm curious if it's possible to have two different versions of ReactJS running on the same page, similar to how jQuery has jQuery.noConflict(). After doing some research, I came across some interesting findings: Two Reacts Won’t B ...

javascriptreactjs

Using Javascript function with ASP.NET MVC ActionLink

I need help with loading a partial view in a modal popup when clicking on action links. Links: @model IEnumerable<string> <ul> @foreach (var item in Model) { <li> @Html.ActionLink(item, "MyAction", null, new ...

javascriptjqueryasp.net-mvc-4

The ThemeProvider does not automatically provide theme injections

After creating a theme using the createTheme method from @mui/material/styles, I attempted to apply this theme using ThemeProvider from the same package. This snippet showcases the dark theme that was created: export const darkTheme = createTheme({ pale ...

javascriptreactjsmaterial-uithemesthemeprovider

Create a parent dropdown class that contains two separate bootstrap dropdowns nested within it

I am encountering an issue with my dropdown menus. I have 2 dropdown menu items under the same parent dropdown class. However, when I click on dropdown action 1, it displays the body of dropdown menu 2 items instead. <!DOCTYPE html> <html> < ...

javascriptjquerytwitter-bootstrapdrop-down-menu

Unable to display modal pop-up in ASP.NET Core MVC web application

I have developed a web application using ASP.NET CORE MVC. I encountered an unusual issue while trying to display a modal popup using JQuery. The div structure I am working with is as follows: <div class="modal fade" tabindex="-1" r ...

javascriptjqueryasp.net-core-mvcbootstrap-modal

What sets Angular.js apart from Angular.dart?

Although I have some knowledge of Angular.js, I am now interested in learning Dart and Angular.dart on my own. I am curious to understand the nuances and variances between these two technologies. Despite the fact that the Angular.dart tutorial explicitly ...

angularjsdartangular-dart

How can I leverage Express, AngularJS, and Socket.io to facilitate broadcasting and receiving notifications?

A new notification system is in the works. To illustrate, User 1 is initiating a friend request to User 2. The technologies being utilized include express.js, angularjs, and socket.io. When User1 clicks the button, a request is sent. On User2's end, a ...

javascriptangularjsnode.jsexpresssocket.io

Leveraging ng-selected in AngularJS to effortlessly select multiple options from a collection

Two arrays of objects are causing me some confusion, with one array being a subset of the other: $scope.taskGroups = [ {id: 1, name: 'group1', description: 'description1'}, {id: 2, name: 'group2', description: 'descr ...

javascriptangularjs

Updating the state using ui-router

The application consists of pages labeled as X, Y, and Z. The intended route is to navigate from page X to select details, then move onto page Y to select additional details, and finally land on page Z. I wish that upon clicking the window's back butt ...

javascriptangularjsangular-ui-router

Trouble with jquery/ajax form submission functionality

I followed a jQuery code for form submission that I found on various tutorial websites, but unfortunately, the ajax functionality doesn't seem to be working. When I try to submit the form, nothing happens at all. I've tried troubleshooting in eve ...

javascriptphpjqueryajaxforms

Tips for running a dry default with Angular CLI

Query: Can dry-run be set as the default in a configuration? Purpose: Enabling dry-run by default simplifies the learning process by minimizing clean-up tasks if the command is not correct. This can encourage users to always perform a test run before exec ...

javascriptangulartypescriptangular-cliangular-cli-v6

A guide to automatically playing audio on a webpage using HTML and JavaScript

I'm currently in the process of developing a quiz application, and my goal is to have a sound play when a user enters the webpage to initiate the quiz. Initially, I attempted to use JavaScript to trigger the sound on page load, but unfortunately, the ...

javascripthtmljqueryaudio

Encountering an unrecognized error on Windows when attempting to execute a child process with regex return

Below is the code I am utilizing to retrieve Make file targets: const command = `make -qp | awk -F':' '/^[a-zA-Z0-9][^$#\\/t=]*:([^=]|$)/ {split($1,A,/ /);for(i in A)print A[i]}'`; cp.exec(command, options, (error, stdout, s ...

javascriptnode.jsregexwindowsmakefile