Steps to automatically populate a textbox with a default value using ng-model

Question

Steps to automatically populate a textbox with a default value using ng-model

Presented in HTML format:

<div class="row" ng-app="">
    <form>
         <input type="text" ng-model="link" name="link"
                class="form-control" id="yesklinkshjhs3" 
                value="hello" placeholder='Link for your post.'>
    </form>

    <small><a href='' ng-bind='link' class="thelink"></a></small>
</div>

This HTML code was created specifically to address an issue. Although it may contain errors, the main problem is that the textbox cannot be prefilled with a value when using ng-model.

If the ng-model is removed, the value appears. However, I require the form to be prepopulated to allow for easy editing of a post. How can I achieve this?

I attempted removing ng-model, which resolved the issue but I need it in place to display real-time changes in the next box. My experience with Angular is limited.

Here is the JSFiddle link: http://jsfiddle.net/iamrahulkumar001/wksapfr2/

The textbox remains empty despite attempts to prefill it.

javascript angularjs

Answer 1

Answer №1

It appears there are a few adjustments needed for your JSFiddle code. To begin, make sure to utilize the ng-app directive in order to bootstrap your application correctly. Additionally, don't forget to register MyCtrl as a controller. Lastly, consider assigning a default value to inputValue within the MyCtrl controller. Take a look at this revised example below which addresses these key points.

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

function MyCtrl($scope) {
    $scope.inputValue = 'sjks';
    $scope.$watch('inputValue', function(thisValue) {
        $scope.inputValueEcho = thisValue;
    });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
    <input data-ng-model="inputValue" data-ng-trim="false" value='sjks'/>
    <p>This value: ----<span data-ng-bind="inputValue"></span>----</p>
    <p>This value (echo): ----<span data-ng-bind="inputValueEcho">dddddd</span>----</p>
</div>

Answer 2

It appears there are a few adjustments needed for your JSFiddle code. To begin, make sure to utilize the ng-app directive in order to bootstrap your application correctly. Additionally, don't forget to register MyCtrl as a controller. Lastly, consider assigning a default value to inputValue within the MyCtrl controller. Take a look at this revised example below which addresses these key points.

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

function MyCtrl($scope) {
    $scope.inputValue = 'sjks';
    $scope.$watch('inputValue', function(thisValue) {
        $scope.inputValueEcho = thisValue;
    });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
    <input data-ng-model="inputValue" data-ng-trim="false" value='sjks'/>
    <p>This value: ----<span data-ng-bind="inputValue"></span>----</p>
    <p>This value (echo): ----<span data-ng-bind="inputValueEcho">dddddd</span>----</p>
</div>

Steps to automatically populate a textbox with a default value using ng-model

Answer №1

Similar questions

Retrieving information from metaweather API and displaying it on an angularjs webpage

When implementing protractor spyOn() with jQuery's ajax() function, an error is triggered stating 'ajax() method is non-existent'

Issue with AngularJS custom filter resulting in empty data output

Exploring the method of accessing one Vue plugin from another plugin with the use of Vue.prototype

What is causing the sorting table to fail in React when using useState?

Understanding the optimal timing for when the user interface is fully functional in React/Redux

Navigating the techniques of filtering an object with an array

Discovering the Nearest Object on a Line in Three.js

A password-protected website scraper using Node.js

Guide to filtering out cookies using express-winston

Tips for avoiding API calls at specific intervals while in the process of logging out from a web application

Techniques for adding values to arrays in JavaScript

How come the CSS doesn't animate when I use JavaScript to switch the class?

How to create custom popups in AngularJS using sweetalert 2 and custom HTML

What is the best way to use the Object3D.lookAt() function to align an ExtrudeGeometry face with an object?

What is the best way to retrieve a value from a JSON object using AngularJS?

Is it possible for URLSearchParams to retrieve parameters in a case-insensitive manner

Obtaining Asynchronous JavaScript responses with Selenium Webdriver

Is there a way to alter the format of a URL?

Creating a GET request in Node.js using the request module