【问题标题】:Angular.js pass value from select to another viewAngular.js 将值从选择传递到另一个视图
【发布时间】:2014-08-04 09:28:51
【问题描述】:

我想将一些选定的值传递给另一个视图。这是我的 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>

控制器:

.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");
    };
});

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

更新:应显示标题的视图:

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

第二个视图的Controller:

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

})

【问题讨论】:

  • 无论是$broadcast还是service,除非是继承作用域的子控制器,否则可以直接读取model中带点的属性
  • 你能给我一个匹配我的代码的例子吗?会很好
  • 我很乐意,但我没有在您的代码中看到两个视图/模型,所以真的不知道如何抽象它
  • 好的,它与 AccountCtrl 有什么关系?是平行、父、子吗?
  • 对不起,我现在正在学习角度,但我认为是平行的。

标签: javascript angularjs


【解决方案1】:

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

在你的 routes.js 中,你可以把它写成 viewName/:paramName。

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

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

【讨论】:

  • 正确的解决方案,但您可以添加一些代码以使其不那么抽象?提前联系
  • 是的,这很好。也许匹配我上面的代码;)
  • 是的,虽然有点抽象。无论如何,很高兴它有所帮助。如果对你有帮助,请点赞
【解决方案2】:
when('/selectedCity/:CityId', {
      templateUrl: 'templates/CityDetails.html',
      controller: 'ShowOrderController'
});

在控制器中

$scope.order_id = $routeParams.CityId;

【讨论】:

  • 这个“何时”应该放在哪里?州在哪里被定义?
  • "when" 应该保存在你的路由提供者中。并且应该在 ShoworderController 中使用 $routeParams.CityId 获取,您可以参考 **[Here]**(docs.angularjs.org/tutorial/step_07)
【解决方案3】:

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

<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>

父控制器

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

账户控制人

.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");
    };
});

【讨论】:

  • 但这与我的问题无关,不是吗?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-08-10
  • 2012-07-14
  • 1970-01-01
  • 2022-11-22
  • 2017-05-20
  • 1970-01-01
相关资源
最近更新 更多