角度选择指令，并具有所选择的选项填充视图

这里我有麻烦是我的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。服务器还将响应与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选项中遗漏了一些东西。这几乎就像我想在表单对象的ID作为外键的数据在数据存储

解决方案1： 设置$范围$腕表（）上的表单对象的ID并在有变化时让它搜索数据存储区。存储从所述数据存储中创建对象到私有模型，并使用该专用模型视图中的用于显示

解决方案2： 绑定对象到表单对象并直接使用的形式的对象供显示。加载数据时，搜索对象的数据存储并使用对象覆盖表单标识。发送数据时，从对象中抽取id并将其分配给表单ID。不幸的是，该方法具有拔毛步

这里是一个小提琴后消隐下拉的副作用：http://jsfiddle.net/D95c3/

是否还有更好的，更有棱角的方式来做到这一点？

来源

2014-02-12 user3300340

你可以简单地使用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

来源

2014-02-12 11:17:41 Skinty

将changeUser（填充）做同样的事情$范围。$表（）之类 '$ scope.changeUser = function（）{ var found = $ filter（'filter'）（$ scope.userStore，{id：$ scope.formObject.user_id}，true）;如果（found.length）{0,1,2，...，$ scope._userView = found [0]; } }' 我仍然会使用'

My name is {{_userView.name}}

'来显示数据？ – user3300340

是的，您将可以在'changeUser'函数中完全访问'$ scope.formObject'，因为AngularJS通过'ng-model'绑定到'$ scope.formObject'。 – Skinty

角度选择指令，并具有所选择的选项填充视图

回答

相关问题