CODEWITHSUNDEEP
javascripthtmlangularjsangularjs-controllerangularjs-ng-model
UnworthyToast
UnworthyToast

Reputation: 825

Inserting text into HTML from AngularJS

In my index.html file, I have created a very bare-bones form. I have separated much of the detail into app.js so that if someone wants to have their version of the form look different, they just have to insert a modified copy of app.js (trying to go for portability here).

However, I am very new to AngularJS, which is what a lot of app.js is using. I could use some help please!

Here is a code snippet that I'm having some trouble with:

<body ng-controller="controller">
<div class="page">
  <section class="signin">
  <form name="form" novalidate>

    <div class="intro">
      <label ng-model="service-desk-name"></label>
      <span ng-bind="service-desk-name"></span>
      <label ng-model="welcome"></label>
      <span ng-bind="welcome"></span>
    </div>

Coupled with:

var app = angular.module('app',[]);

app.controller('controller', ['$scope', function($scope) {
    $scope.service-desk-name = 'Arbitrary Service Desk Name';
    $scope.welcome = 
        'Please sign in and a consultant will be with you shortly.';
}]);

Because I may be doing something dreadfully wrong, I'll explain what I want to do. The intro section is displayed above the actual form, showing the service desk name, and some kind of custom welcome or informational message through ng-model="service-desk-name" and ng-model="welcome", respectively. My hope is that I can get the HTML to grab value of these two models that I define in app.js. This way, the HTML doesn't control what is displayed, it just grabs what is defined and displays it.

Right now, these fields are not showing up at all on the webpage, indicating that there's just some kind of syntax error. I'm so new to Angular so I don't really know what to try to fix it from here.

Upvotes: 2

Views: 2098

Answers (3)

user2618294
user2618294

Reputation:

Agree with Pankaj Parkar

Also you can't get value in this case because you don't set "ng-app"

plnkr link

var app = angular.module('app', []);


app.controller('myController', function ($scope) {
    $scope.serviceDeskName = 'Arbitrary Service Desk Name';
    $scope.welcome = 'Please sign in and a consultant will be with you shortly.';
});
<!DOCTYPE html>
<html ng-app="app"> <!-- For example define your app module name here -->

<head>
  <link rel="stylesheet" href="style.css">
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-controller="myController">
  <div class="page">
    <section class="signin">
      <form name="form" novalidate>
        <div class="intro">
          <label ng-model="serviceDeskName"></label>
          <span ng-bind="serviceDeskName"></span>
          <hr>
          <label ng-model="welcome"></label>
          <span ng-bind="welcome"></span>
        </div>
      </form>
    </section>
  </div>
</body>

</html>

Upvotes: 0

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

Variable name can not have most special character (except _, $) when you are defining directly after a .(dot). This is the reason where controller code is throwing an error, since nothing is getting rendered on page.

You could define that property by specifying key over $scope object like 

$scope['service-desk-name'] = 'Arbitrary Service Desk Name';

Additionally the ng-model would work on input element only, but you are using over label. Do below change to welcome as well.

<input ng-model="service-desk-name"/>

But Ideally you shouldn't be define scope variable in such format. Preferred way would be to use camelCase while defining variables.

Upvotes: 1

Ozrix
Ozrix

Reputation: 3515

replace

<label ng-model="service-desk-name"></label>

with 

<label>{{service-desk-name}}</label>

ng-model means that you want bi-directional binding, and is used for example with inputs, so that when you start typing into the input, the value is stored inside anything that you reference through ng-model, i.e.

<input type="text" ng-model="inputValue" />

will save the input into $scope.inputValue

{{}} means you want to output something from the controller in the view.

Upvotes: 3

Related Questions