Items not rendering into HTML

StackOverflow https://stackoverflow.com/questions/23640565

  •  21-07-2023
  •  | 
  •  

Question

I have an MVC 4 project with one index page that is getting loaded on F5:

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Interaction Simulator</title>
    <script src="~/Scripts/angular.js"></script>
</head>
<body>
    <div ng-app>
        <div ng-controller="indexController">
            <ul>
                <li ng-repeat="item in simulations">
                    {{item.name}}
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

I used Nuget to get AngularJS, then added src="~/Scripts/angular.js" to the index page. Then I added a new .js file in the scripts folder:

hello-angular.js:
var indexController = function($scope) {
    $scope.simulations = [
        { simName: "TestSim1" },
        { simName: "TestSim2" }];
}

When I run this the list of simulations if not rendered, and there are no errors. What am I doing wrong?

Was it helpful?

Solution

You try to display {{item.name}} but you've defined array of objects with simName property.

You should use {{item.simName}}

Here it works: http://jsfiddle.net/aartek/6935R/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top