Как предварительно заполнить текстовое поле значением, используя ng-модель

Question

У меня есть 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>

Я создал этот HTML-код только для того, чтобы показать проблему, поэтому возможны некоторые ошибки, но основная проблема заключается в том, что текстовое поле не может быть заполнено любым значением, если яиспользуйте ng-model там.

Если я удаляю ng-model, значение там. Мне нужно предварительно заполнить форму, чтобы отредактировать сообщение, как мне это сделать?

Я пытался удалить ng-model, тогда он работает, но мне нужно ng-model, чтобы показатьизменения в реальном времени в следующем окне. Я новичок в angular.

Вот скрипка http://jsfiddle.net/iamrahulkumar001/wksapfr2/

Текстовое поле не имеет предварительно заполненного значения ...

Answer 1

В вашем JSFiddle есть несколько вещей, которые необходимо исправить. Во-первых, вам нужно использовать директиву ng-app для начальной загрузки вашего приложения. Во-вторых, вы должны зарегистрировать MyCtrl в качестве контроллера. В-третьих, вы можете установить значение по умолчанию для inputValue в вашем MyCtrl контроллере. Ниже приведен рабочий пример, демонстрирующий эти три элемента.

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>