After delving into angular.js recently (and I use the term "delve" loosely), I have been working on creating a basic website and hit a roadblock with form validation. It seems that the double bracket notation I picked up from "Shaping up with angular.js" is not functioning properly on my current webpage. I've been tinkering with this all day and there are likely several issues in my code (feel free to provide feedback).
The specific code snippet causing the trouble is as follows:
<div class="divvy" ng-repeat="slider in main.sliders">
<h3>
{{slider.name}} costs {{slider.cost | currency}}
</h3>
</div>
I can share the entire code, but for context, the class "divvy" is just a roundabout way to center the div on the screen. The header section looks like 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>
Regarding the script.js file, it's quite simple since I haven't made any significant changes to it yet other than debugging the issue at hand.
(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"
}
]
})()
I would greatly appreciate some assistance. I suspect that another attempt to fix something might have interfered with proper angular use (there's a button intended for text editing within the code, which used to function but stopped after accidentally undoing some changes). Furthermore, if you have the time, there's a background image that I spent considerable effort centering and ensuring it's "zoom-proof," but now I want to dynamically change it (background shifts with slides or fade transitions) and the background image is specified in style.css html{}... And I'm unsure how to alter that using "myStyle" or even incorporate ng-myStyle. Thank you. The complete code is available at plunker, here: https://plnkr.co/edit/H4uhcU