角度選擇指令，並具有所選擇的選項填充視圖

這裏我有麻煩是我的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

角度選擇指令，並具有所選擇的選項填充視圖

回答

相關問題