CODEWITHSUNDEEP
javascriptangularjs
LIsa
LIsa

Reputation: 65

How to prefill a textbox with a value using ng-model

I have this as HTML:

<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>

I have created this HTML just to show the problem so there may be some mistakes but the main issue is that the textbox cant is prefilled with any value if I use the ng-model there.

If I remove the ng-model the value is there. I need the form to be prefilled to facility the editing of a post, how should I do that ??

I have tried removing the ng-model it works then but I need the ng-model there to show the realtime change in the next box. I am new to the angular.

Here is a fiddle http://jsfiddle.net/iamrahulkumar001/wksapfr2/

The textbox does not have any prefilled value ...

Upvotes: 0

Views: 1015

Answers (1)

Lex
Lex

Reputation: 7194

There's a few things with your JSFiddle that need to be fixed. First, you'll need to use the ng-app directive to bootstrap your application. Second, you should be registering MyCtrl as a controller. Third, you can set a default value for inputValue in your MyCtrl controller. Below is a working example demonstrating these three items.

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>

Upvotes: 1

Related Questions