current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

I am new to angular and creating a small project using angular ui-router. After going to documents, I have created the sample flow. But I got stuck in passing the json value to the template.

  • I am unable to paint the json on the page, if i add the normal string in my html then it is coming fine, this is happening once i navigate from one screen to another screen.
  • Unable to navigate to the back on click of back button.

This is what I tried:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular Demo</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>

</head>
<body ng-app="myApp" ng-controller="appController">

<div class="container" ui-view>
    <div id="div1">
  <ul>
        <li ng-repeat="x in data"><a ui-sref="test">{{ x.id }}</a></li>
    </ul>
</div>
</div>

<script type="text/javascript" src="app.js"></script>
 <script type="text/javascript" src="controller.js"></script>
</body>
</html>

Demo - Plunker

share|improve this question

put on hold as off-topic by Phil, cartant, greg-449, EdChum, Hunter Turner 8 hours ago

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "This question was caused by a problem that can no longer be reproduced or a simple typographical error. While similar questions may be on-topic here, this one was resolved in a manner unlikely to help future readers. This can often be avoided by identifying and closely inspecting the shortest program necessary to reproduce the problem before posting." – Phil, cartant, EdChum, Hunter Turner
If this question can be reworded to fit the rules in the help center, please edit the question.
    
You have ui-sref="/" in test.html. That is not a valid state name – Phil 18 hours ago
up vote 1 down vote accepted

trying changing your test.html to this:

<a href="#" ui-sref="home">back</a>
<h1>test html</h1>
<h3>id = {{ id }}</h1>

and add a new state for the index (I've called it 'home'), so your app.js will look like this:

var app = angular.module('myApp', ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
    .state('test', {
        url: '/test',
        templateUrl: 'test.html',
        controller: 'appController'
    })
    .state('home', {
        url: '/',
        templateUrl: 'index.html',
        controller: 'appController'
    });
});

Controller.js updated to accept an 'id' param:

app.controller('appController',function($scope,$stateParams){
    var ctrl = this;
    $scope.data = [{id:01},{id:02}];
    $scope.id = $stateParams.id;
});

and index.html to be udpated on this line to pass in an id value:

<li ng-repeat="x in data"><a ui-sref="test({ id: x.id })">{{ x.id }}</a></li>
share|improve this answer
    
Thanks, it works how do I get my json obj into $stateParams and how do I map to my routed view. – M-S 18 hours ago
    
updated to include passing an 'id' value to the template. – laney 18 hours ago

Not the answer you're looking for? Browse other questions tagged or ask your own question.