我如何从 ng-repeat 建立链接并将值传递到另一个页面？ Angularjs

Question

我正在尝试在用户按下 link 后发送数据并将其显示在另一页中。我环顾四周，但我尝试的一切都不能让我做我需要的。

这是我的 html.

第1页手册 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>

这是控制器

// 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();
});

})();

我需要在单击时将 {{x.tat}}{{x.test}} 等发送到另一个页面。我见过很多非常相似的东西，但没有这样的。我试着在

中发送它

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

但不起作用。我能得到任何指示吗？

Answer 1

我认为您还需要提供您正在导航的页面的片段，描述您如何尝试读取该数据。

我自己没有使用过温泉-ui，但是根据 the docs 看来您需要使用 myNavigator.getCurrentPage() 来访问您附加到您的任何自定义键options 对象。

Answer 2

正如 Jesse 提到的，检索信息所需的代码是：

myNavigator.getCurrentPage().options

但是在我看来，您可能在调用 pushPage 本身时遇到了问题。确保您所写的结果正确 javascript。

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

onclick 和 ng-click 之间存在细微差别 - 在 ng-click 中，您在 angular 上下文中执行所有操作，而在 onclick 中，它仅js，这意味着您无权访问范围 - 您可以像这样欺骗它 {{ x }}，但如果您不小心，有时可能会导致一些问题。

在您的示例代码中，x.tat 和 x.test 是字符串 - "value of tat" 和 "value of string" 那么您会得到类似

的内容

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

字符串不会被引用，你会得到一个错误。我的猜测是这就是您的情况。添加引号也不是很好，因为您可能决定将 x.test 变成一个数字，然后您需要删除它们等

作为一般规则，您应该避免额外的 {{ }}s 以避免麻烦。

// 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}}'})">

另外，如果我说的是真的，那意味着您很可能应该在控制台中收到错误消息。您可以使用 right click → inspect element → console 检查。还可以使用检查器（无需单击控制台）查看 DOM 的渲染方式，还可以查看 angular 完成后最终代码的样子。

还有一个Demo可能更容易理解。没有 ng-repeat，但这不是导致问题的原因，所以我认为您应该能够处理。

如果有什么地方你不明白或不知道如何进行，请随时发表评论，我会回答你:)

我如何从 ng-repeat 建立链接并将值传递到另一个页面？ Angularjs

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

angularjs

onsen-ui