Angular.js将值从select传递到另一个视图

时间:2022-02-25 12:58:12

I want to pass some selected value to another view. This is my HTML. There is a select field. On Button click the next page should be shown with the selected value as header title.

我想将一些选定的值传递给另一个视图。这是我的HTML。有一个选择字段。在按钮上单击,应显示下一页,并将所选值作为标题标题。

<div class="list">
  <label class="item item-input item-select">
    <div class="input-label">
      Deine Stadt
    </div>
    <select ng-model="selectedCity" ng-options="city.name for city in cities">

    </select>
  </label>
</div>

<br>
<button ng-click="searchCity(selectedCity)" class="button button-outline button-positive">
  Gutscheine suchen
</button>

The Controller:

控制者:

.controller('AccountCtrl', function($scope, $state) {
    $scope.cities = [
      {id:'001', name:'Konstanz'},
      {id:"002", name:"Freiburg"} 
    ];
    $scope.selectedCity = $scope.cities[0];

    $scope.searchCity = function(selectedCity){
        console.log(selectedCity.name);
        $state.go("tab.friends");
    };
});

The console.log(selectedCity.name) works fine. But how can I bring this value to another controller to show it in header? I don´t need a service! Ty.

console.log(selectedCity.name)工作正常。但是,如何将此值传递给另一个控制器以在标头中显示它?我不需要服务! TY。

UPDATE: The VIEW where the title should be shown:

更新:应显示标题的VIEW:

<ion-view title="{{selectedCity.name}}">
</ion-view>

The Controller of the second view:

第二个视图的控制器:

.controller('FriendsCtrl', function($scope) {

})

3 个解决方案

#1


1  

You can pass the value as a route params to the other view, provided if the other view points to some other route..

您可以将值作为路径参数传递给另一个视图,前提是另一个视图指向其他路径。

in your routes.js, you can put it like viewName/:paramName.

在您的routes.js中,您可以将其设置为viewName /:paramName。

And then in your controller, you can access it like $routeParams.paramName..

然后在您的控制器中,您可以像$ routeParams.paramName一样访问它。

[paramName is the name of the parameter you're passing :D]

[paramName是您传递的参数的名称:D]

#2


1  

when('/selectedCity/:CityId', {
      templateUrl: 'templates/CityDetails.html',
      controller: 'ShowOrderController'
});

and in Controller

在控制器中

$scope.order_id = $routeParams.CityId;

#3


0  

You can define a scope variable higher up in the scope chain so that the model is shared between both controllers:

您可以在作用域链中更高的位置定义作用域变量,以便在两个控制器之间共享模型:

<body ng-controller="bodyCtrl">

    <ion-view title="{{model.selectedCity.name}}">
    </ion-view>

    <div ng-controller="AccountCtrl">
    <div class="list">
      <label class="item item-input item-select">
        <div class="input-label">
          Deine Stadt
        </div>
        <select ng-model="model.selectedCity" ng-options="city as city.name for city in cities">   
        </select>
      </label>
    </div>

    <br>
    <button ng-click="searchCity(model.selectedCity)" class="button button-outline button-positive">
      Gutscheine suchen
    </button>
    </div>
</body>

Parent Controller

家长控制器

app.controller('bodyCtrl', function($scope) {
    $scope.model = { selectedCity: }
});

Account Controller

账户管理员

.controller('AccountCtrl', function($scope, $state) {
    $scope.cities = [
      {id:'001', name:'Konstanz'},
      {id:"002", name:"Freiburg"} 
    ];
    $scope.model.selectedCity = $scope.cities[0];

    $scope.searchCity = function(selectedCity){
        console.log(selectedCity.name);
        $state.go("tab.friends");
    };
});

#1


1  

You can pass the value as a route params to the other view, provided if the other view points to some other route..

您可以将值作为路径参数传递给另一个视图,前提是另一个视图指向其他路径。

in your routes.js, you can put it like viewName/:paramName.

在您的routes.js中,您可以将其设置为viewName /:paramName。

And then in your controller, you can access it like $routeParams.paramName..

然后在您的控制器中,您可以像$ routeParams.paramName一样访问它。

[paramName is the name of the parameter you're passing :D]

[paramName是您传递的参数的名称:D]

#2


1  

when('/selectedCity/:CityId', {
      templateUrl: 'templates/CityDetails.html',
      controller: 'ShowOrderController'
});

and in Controller

在控制器中

$scope.order_id = $routeParams.CityId;

#3


0  

You can define a scope variable higher up in the scope chain so that the model is shared between both controllers:

您可以在作用域链中更高的位置定义作用域变量,以便在两个控制器之间共享模型:

<body ng-controller="bodyCtrl">

    <ion-view title="{{model.selectedCity.name}}">
    </ion-view>

    <div ng-controller="AccountCtrl">
    <div class="list">
      <label class="item item-input item-select">
        <div class="input-label">
          Deine Stadt
        </div>
        <select ng-model="model.selectedCity" ng-options="city as city.name for city in cities">   
        </select>
      </label>
    </div>

    <br>
    <button ng-click="searchCity(model.selectedCity)" class="button button-outline button-positive">
      Gutscheine suchen
    </button>
    </div>
</body>

Parent Controller

家长控制器

app.controller('bodyCtrl', function($scope) {
    $scope.model = { selectedCity: }
});

Account Controller

账户管理员

.controller('AccountCtrl', function($scope, $state) {
    $scope.cities = [
      {id:'001', name:'Konstanz'},
      {id:"002", name:"Freiburg"} 
    ];
    $scope.model.selectedCity = $scope.cities[0];

    $scope.searchCity = function(selectedCity){
        console.log(selectedCity.name);
        $state.go("tab.friends");
    };
});