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

时间:2016-04-09 16:19:49

标签: list cordova ionic-framework onclick navigation

我试图用ionic / cordova来实现这个目标:

按下按钮

进入带有列表的新屏幕

选择列表中的项目

并使用所选值返回原始文件。

有人可以指示如何完成此操作并举例说明如何完成此操作?感谢。

1 个答案:

答案 0 :(得分:0)

提供您已尝试过的内容。但是,我明白你想要的是什么:

确保所有页面/模板都在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