ionic-如何转到列表并选择并返回到具有所选值的原始值

Question

我正试图使用ionic/cordova:来实现这一点

按下按钮

转到带有列表的新屏幕

选择列表中的项目

并且返回到具有所选择的值的原始值。

有人能给出如何实现这一目标的指示，并举例说明如何实现这项目标吗？谢谢

Answer 1

请提供您已经尝试过的内容。然而，我理解你想要什么：

确保你的所有页面/模板都在app.js中正确设置，有一个controller.js和services.js.

控制器之间的数据传递是通过服务完成的。您可以将服务注入每个页面的控制器，并使用set()和get()方法相应地更改和接收值。

HTML（第一页）：

<ion-view view-title="firstPage">
    <ion-content>
        <!-- Binds selected value to div -->
        <div ng-bind="selected.selec"> </div>
        <!-- Goes to next page -->
        <button class="button" ng-click="next()">
            Next
        </button>
    </ion-content>
</ion-view>

控制器（第一个）：

.controller('firstPageCtrl', function($scope, $state, savedList) {
    // Go to next page
    $scope.next = function() { $state.go("secPage"); }
    // Get selected value from service, savedList
    $scope.selected = { selec: "" };
    $scope.selected.selec = savedList.get();
})

HTML（第二页）：

<ion-view view-title="secPage">
    <ion-content>
        <!-- Radio buttons will only allow one value to be selected at one time -->
        <ion-list>
            <!-- Pass in value of radio button to update function -->
            <ion-radio ng-model="choice" ng-value="'A'" ng-change="update('A')">Choose A</ion-radio>
            <ion-radio ng-model="choice" ng-value="'B'" ng-change="update('B')">Choose B</ion-radio>
        </ion-list>
        <!-- Goes back to first page -->
        <button class="button" ng-click="back()">
            Go Back
        </button>
    </ion-content>
</ion-view>

控制器（第二个）：

.controller('secPageCtrl', function($scope, $state, savedList) {
    $scope.back = function() { $state.go("firstPage"); }
    // Send selected value to service, savedList
    $scope.update = function(selec) { 
        savedList.set(selec); 
    }
})

服务：

.factory('savedList', function() {
    var selec = "";
    // Sets selec to what ever is passed in
    function set(data) {
        selec = data;
    }
    // Returns selec
    function get() {
        return selec;
    }
    return {
        set: set,
        get: get
    }
})

https://docs.angularjs.org/guide/services