Input value not visible in angularJS

Question

This input value should be "Paris" but it does not display. What is wrong with my code?

(function(angular, undefined) {
  var mon_app = angular.module('mon_app', []);
  angular.module('mon_app').controller('monctrl', function($scope) {})
}(window.angular));

<!DOCTYPE html>
<html class="app" ng-app="mon_app">

<head lang="fr" class="app">
</head>

<body>
  <div ng-controller="monctrl">
    This input value is "Paris"
    <input name="lieu" ng-model="lieu" type="text" value="Paris" />
  </div>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.js"></script>
</body>

It wont work that way. You need to set $scope.lieu="paris" in your controller to set default value — PSL
– PSL, Commented Jan 21, 2015 at 21:11

floribon · Accepted Answer · 2015-01-21 21:12:56Z

7

You cannot mix regular HTML (the value attribute of your input) and the angular-driven ng-model. The input will always display the value of what's in ng-model, here lieu, hence you should iniialize $scope.lieu with the Paris value.

(function(angular, undefined) {
  var mon_app = angular.module('mon_app', []);
  angular.module('mon_app').controller('monctrl', function($scope) {
    $scope.lieu = "Paname";
  })
}(window.angular));

<!DOCTYPE html>
<html class="app" ng-app="mon_app">

<head lang="fr" class="app">
</head>

<body>
  <div ng-controller="monctrl">
    This input value is "{{lieu}}"
    <input name="lieu" ng-model="lieu" type="text"/>
  </div>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.js"></script>
</body>

answered Jan 21, 2015 at 21:12

floribon

19.2k5 gold badges56 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

floribon Over a year ago

@user2761037 If that helped you please +1 and/or accept the answer :)

Papa Sax Over a year ago

I would love to, but i actually created my stackoverflow account to ask this question. Vote Up requires 15 reputation.

floribon Over a year ago

I see. Let's call it, échange de bon procédé ;-)

Collectives™ on Stack Overflow

Input value not visible in angularJS

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related