Question

尝试通过选择下拉框来更新兄弟控制器中的模型。

<div ng-app="myapp">
<fieldset ng-controller="FirstCtrl">
    FirstCtrl Person: {{selectedPerson.last}}<br>
    <select 
        ng-options="p.first + ' ' + p.last for p in people"
        ng-model="selectedPerson"></select>

    {{ selectedPerson }}
</fieldset>
<div ng-controller="SecondCtrl">
SecondCtrl Person: {{selectedPerson.last}}<br>
</div>

我尝试了几种解决方案（工厂，服务），它们与输入字段配合得很好，但没有选择框我做了一个简单的fiddle 如何以简单而有棱角的方式实现这一目标？

Answer 1

最后，这里有一个小技巧，其中两个控制器没有父/子关系。它应该通过$ rootScope和$ broadcast方法从一个控制器传递数据。

<强> app.js

var myapp = angular.module('myapp', []);
myapp.controller('FirstCtrl', function ($rootScope,$scope) {
    $scope.selectedPerson = null;
    $scope.people = [
        { id: 1, first: 'John', last: 'Rambo', actor: 'Silvester' },
        { id: 2, first: 'Rocky', last: 'Balboa', actor: 'Silvester' },
        { id: 3, first: 'John', last: 'Kimble', actor: 'Arnold' },
        { id: 4, first: 'Ben', last: 'Richards', actor: 'Arnold' }
    ];
    $rootScope.updatePerson = function(){
        $rootScope.$broadcast('update_SecondCtrl', $scope.selectedPerson);
    }
});
myapp.controller('SecondCtrl', function ($rootScope,$scope) {
$scope.selectedPerson = null;
$scope.people = [
    { id: 1, first: 'John', last: 'Rambo', actor: 'Silvester' },
    { id: 2, first: 'Rocky', last: 'Balboa', actor: 'Silvester' },
    { id: 3, first: 'John', last: 'Kimble', actor: 'Arnold' },
    { id: 4, first: 'Ben', last: 'Richards', actor: 'Arnold' }
];

$rootScope.$on("update_SecondCtrl", function(event, selectedPerson) {
    $scope.selectedPerson = selectedPerson;
  });
});

<强>的index.html

<div ng-app="myapp">
<fieldset ng-controller="FirstCtrl">
    <select 
        ng-options="p.first + ' ' + p.last for p in people"
        ng-model="selectedPerson"
        ng-change="updatePerson()"
        ></select>
</fieldset>
<fieldset ng-controller="SecondCtrl">
    <select
        ng-options="p.first + ' ' + p.last group by p.actor for p in people"
        ng-model="selectedPerson"></select>
    {{ selectedPerson }}
</fieldset>

我已更新fiddle。

AngularJS如何使用ng-options更新选择框中的嵌套模型

1 个答案: