How can i make links from the ng-repeat and pass the values to another page? Angularjs

Question

I'm trying to send the data once the person press on the link and display it in another page. I have looked all around but everything i try doesn't let me do what i need.

this is my html.

Page1 Manual de Toma de Muestras

    <ons-list class="timeline" modifier="inset" ng-controller="namesCtrl">
      <ons-list-item class="timeline-li" modifier="tappable" ng-repeat="x in names">

        <ons-row onclick="myNavigator.pushPage('muestra.html', { animation : 'slide' } )">


          <ons-col>
            <div class="timeline-date">{{ x.tat }}</div>
            <div class="timline-from">
              <span class="timeline-name">{{ x.test }}</span>
              <span class="timeline-id">{{ x.dept }}</span>
            </div>
            <div class="timeline-message">
             <strong>Code:</strong>{{ x.code }}<br>
             <strong>CPT Code:</strong> {{ x.cptcode }}
            </div>
          </ons-col>
        </ons-row>

      </ons-list-item>
    </ons-list>

this is the controller

// controller.js
(function() {
var app = angular.module('myApp', ['onsen']);


//Getting Json Data controller
app.controller('namesCtrl', function($scope, $http) {
 $http.get("json.php")
.then(function (response) {$scope.names = response.data.doctores;});
});


//Sliding menu controller, swiping management
app.controller('SlidingMenuController', function($scope) {

    $scope.checkSlidingMenuStatus = function() {

        $scope.slidingMenu.on('postclose', function() {
            $scope.slidingMenu.setSwipeable(false);
        });
        $scope.slidingMenu.on('postopen', function() {
            $scope.slidingMenu.setSwipeable(true);
        });
    };

    $scope.checkSlidingMenuStatus();
});

})();

i need to send the {{x.tat}}{{x.test}} etc.. to another page when clicked. i have seen a lot of things very similar but nothing like this. i tried sending it in the

$scope.myNavigator.pushPage("link/to/some/other/page.html", {param1: {{x.tat}}, param2: {{x.test}}});

but doesn't work. can i get any direction on it?

score 2 · Accepted Answer · answered Jul 15 '16 at 06:40

As Jesse mentioned the code which you need in order to retrieve the information is:

myNavigator.getCurrentPage().options

However to me it seems that you might be having a problem with the call of pushPage itself. Make sure that what you are writing results in proper javascript.

<ons-row ng-click="myNavigator.pushPage('somepage.html', {param1: x.tat, param2: x.test})">

There is a small difference between onclick and ng-click - in ng-click you are executing everything in angular context, whereas in onclick its only js, meaning that you don't have access to the scope - you can cheat it like this {{ x }}, but that may cause some issues sometimes if you're not careful.

In your example code and x.tat and x.test are strings - "value of tat" and "value of string" then you would get something like

$scope.myNavigator.pushPage("somepage.html", {param1: value of tat, param2: value of test});

the strings will not be quoted and you would get an error. My guess is that this is what is happening in your case. Adding quotes is also not that good as you may decide to make x.test into a number for example and then you would need to remove them etc.

As a general rule you should avoid extra {{ }}s in order to avoid trouble.

// Good
<ons-row ng-click="myNavigator.pushPage('somepage.html', {param1: x.tat, param2: x.test})">

// Bad
<ons-row onclick="myNavigator.pushPage('somepage.html', {param1: '{{x.tat}}', param2: '{{x.test}}'})">

Also if what I said was true that means it's likely that you should've gotten an error in the console. You can check that with right click → inspect element → console. Also using the inspector (without clicking on console) you can view how your DOM was rendered and you can see what the final code looks like after angular has done its thing.

And here's a Demo which may be easier to understand. There is no ng-repeat, but that is not what was causing the issue, so I think you should be able to manage.

If there is something which you did not understand or don't know how to proceed feel free to comment and I will answer you :)

Thanks a lot Ilia Yatchev i tried what jesse said but im new to all of this javascript and angular. so i couldnt figure it out. ur explanation was very helpful. thanks a lot. — Ivan Montes, Jul 16 '16 at 15:11

score 1 · Answer 2 · answered Jul 14 '16 at 00:23

I think you will want to provide a snippet from the page you're navigating into as well, describing how you're trying to read that data.

I haven't used onsen-ui myself, but based on the docs it looks like you need to use myNavigator.getCurrentPage() to access any custom keys you've attached to your options object.

How can i make links from the ng-repeat and pass the values to another page? Angularjs

2 Answers2