Question

嗨，我对角度很新，但是使用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>

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

同样在控制器中有一个表单对象，它保存将来回传递给服务器的id。服务器还将使用带有ID的对象进行响应

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： 在表单对象的ids上设置$ 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字段

angular select指令并使选定的选项填充视图

1 个答案: