角度选择指令并让所选选项填充视图

Question

您好，我对 angular 还很陌生，但是在使用 select 指令时遇到了问题

这是我的html

<div ng-app>
    <div ng-controller="MyTestCtrl">
        <button ng-click="loadData()">LOAD ME</button>
        <button ng-click="sendData()">SEND ME</button>
        <div>
            <div>{{formObject}}</div>
            <div>My name is {{_userView.name}}</div>
            <div>I like to go {{formObject.activity_id.name}}</div>
        </div>
        <div>

        <!--For solution 1 -->
        <select ng-model="formObject.user_id"                  
                ng-options="o.id as o.name for o in userStore">                        
        </select>

        <!--For solution 2 -->
        <select ng-model="formObject.activity_id"                
                ng-options="o.name for o in activityStore track by o.id">                        
        </select>
        </div>
    </div>
</div>

在我的控制器中，我有一堆数据存储，用于填充选择指令的选项。除了 id 和 name，它们还有其他元数据将用于显示目的

在控制器中还有一个表单对象，它保存将来回传递给服务器的 id。服务器也会响应带有 ids 的对象

function MyTestCtrl($scope, $filter) {
    $scope.formObject = {
        user_id: null,
        activity_id: null
    };

    $scope.userStore = [
        {id:50, name: 'Chris R.', address:'456 Far Away'},
        {id:65, name: 'Ryan S.',  address:'029 Somewhat Near'},
        {id:70, name: 'Tommy K.', address:'856 Underground'}
    ];

    $scope.activityStore = [
        {id:10, name: 'Running'},
        {id:13, name: 'Swimming'},
        {id:16, name: 'Biking'}
    ];
    ...
}

从下拉列表中进行选择时，显示应使用适当的数据进行相应更新 当从服务器加载数据时，显示器应使用适当的数据相应地更新自身 当数据发送到服务器时，它需要是正确的格式（只有id，没有额外的数据）

我有一些解决方案，但我希望找到一种更“有角度”的方法。也许我从 ng-options 中遗漏了一些东西。这几乎就像我希望表单对象中的 id 充当数据存储中数据的外键

解决方案 1： 在表单对象中的 id 上设置 $scope.$watch() 并让它在发生更改时搜索数据存储。将创建的对象从数据存储存储到私有模型中，并在视图中使用该私有模型进行显示

解决方案 2： 将对象绑定到表单对象，直接使用表单对象进行展示。加载数据时，在数据存储中搜索对象并用对象覆盖表单 ID。发送数据时，从对象中提取 id 并将其分配给表单 id。不幸的是，这种方法有一个副作用，就是在拔毛步骤之后将下拉菜单屏蔽掉

这是一个小提琴：http://jsfiddle.net/D95c3/

有没有更好、更角度的方法来做到这一点？

Answer 1

您可以简单地使用ng-change 在选择更改时调用函数吗？

<select ng-model="formObject.user_id" ng-options="o.id as o.name for o in userStore" ng-change="changeUser()"></select>

然后在changeUser 函数中可以只引用formObject.user_id 字段，该字段将由ng-model 填充