Double brackets not registering in Angular.js html

Question

I just recently learned angular.js (and i use the word "learned" loosely), and I am trying to make a basic website and have gotten stuck on form validation. I realized that the double bracket notation I learned from "Shaping up with angular.js" isn't registering on the webpage that I have. I've been hacking at this all day and you'll probably see more than a few issues with my code (feel free to comment).

The code piece I am talking about is this:

<div class="divvy" ng-repeat="slider in main.sliders">
  <h3>
    {{slider.name}} costs {{slider.cost | currency}}
  </h3>
</div>

I will include the entire code, but for reference, the class "divvy" is just a convoluted way to make the div centered on the screen. My header reads as this:

<head>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <link href="https://fonts.googleapis.com/css?family=Didact+Gothic|Ek+Mukta|Montserrat" rel="stylesheet">
    <script type="text/javascript" src="script.js"></script>
    <script type="text/javascript" src="//code.angularjs.org/snapshot/angular.min.js"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

  </head>

And the script.js file is rather simple, because I haven't really done anything with it yet besides debugging why this isn't working.

(function(){
var app = angular.module("myModule",[]);
app.controller('MainController',function(){
  this.products= sliders;
});


var sliders= [

  {name:  "Charles",
    cost:  "4.20"
  },
  {
    name:"Alfred",
    cost:"30"
  },
  {
    name:"Something that costs 10 bucks",
    cost:"10.1"
  }



  ]

  })()

Please help me out. I think that something else I was trying to fix made it so that I couldn't use angular properly anymore (there is a button in there that is meant to edit text (also a debugging attempt) and it used to work but no longer does after some ctrl+z made me lose my place). Additionally, if you have extra time, there is a background picture which I spent a lot of time figuring out how to center and make it "zoom-proof", but I would like to edit it dynamically (background changes with slides or fadechanges) but the background img is stuck in style.css html{}... And I don't know how to edit that using "myStyle" or even use ng-myStyle in the first place. Thank you. The full code is at plunker, here: https://plnkr.co/edit/H4uhcU

Sajeetharan · Accepted Answer · 2017-07-18 19:03:48Z

1

It should be,

<div class="divvy" ng-repeat="slider in main.products">

DEMO

var app = angular.module("myModule",[]);
app.controller('MainController',function(){
  var sliders= [
  {name:  "Charles",
    cost:  "4.20"
  },
  {
    name:"Alfred",
    cost:"30"
  },
  {
    name:"Something that costs 10 bucks",
    cost:"10.1"
  }];

  this.products= sliders;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app= "myModule" ng-controller="MainController as main">
<div class="divvy" ng-repeat="slider in main.products">
  <h3>
    {{slider.name}} costs {{slider.cost | currency}}
  </h3>
</div>

answered Jul 18, 2017 at 19:03

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

4 Comments

Quibble Over a year ago

Hey, this isn't working for me. I don't know what the problem is, but I've taken out most of the code that wasn't directly related and have put it in "readme" ;; I've uploaded the new plunker: plnkr.co/edit/H4uhcU

Sajeetharan Over a year ago

you have not refered script.js in the plunker. check here plnkr.co/edit/Y7YhbX?p=preview

Quibble Over a year ago

It works now, the problem was that the script.js reference was BEFORE the google api script reference. Thanks :)

Quibble Over a year ago

One more thing: I have the ng-repeat="slider in main.products"> but after putting the code back in the html file it no longer repeats. Here is the plunk, if you'd be willing to help me one more time:plnkr.co/edit/H4uhcU

Collectives™ on Stack Overflow

Double brackets not registering in Angular.js html

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related