角度單選按鈕而不是選擇

我試圖用單選按鈕替換選擇 - 但是當我切換到單選按鈕時，我鬆開了我的初始選擇和選擇中斷。角度單選按鈕而不是選擇

$scope.selection = Address.get(); // { id: 1, name: "Home" }; 
$scope.addresses = Address.query(); // [{ id: 1, name: "Home" }, { id: 2, name: "Work" }];

從（此示例中的選擇有「主頁」選擇）：

<select class="form-control" ng-model="selection" 
    ng-options="address.street for address in addresses track by address.id"> 
</select>

向（在此示例中爲「主頁」的單選按鈕未選擇）：

<div ng-repeat="address in addresses track by address.id"> 
    <label> 
    <input type="radio" ng-value="address" ng-model="selection" /> 
    <span>{{address.name}}</span> 
    </label> 
</div>

小提琴：https://jsfiddle.net/xczdcqx0/7/

編輯：

我需要selection以反映更改後的id和name：

<span>Selection:</span> <span>{{selection.name}} - {{selection.id}}</span>

來源

2016-01-27 Kevin Sylvestre

來源：

<div ng-repeat="address in addresses track by address.id"> 
    <label> 
    <input type="radio" ng-checked="checked(address)" ng-click="click(address)" /> 
    <span>{{address.name}}</span> 
    </label> 
</div>

控制器：

app.controller("SampleController", ["$scope", "Address", function($scope, Address) { 
    $scope.selection = Address.get(); // { id: 1, name: "Home" }; 
    $scope.addresses = Address.query(); // [{ id: 1, name: "Home" }, { id: 2, name: "Work" }]; 

    $scope.checked = function(address) { 
    return address.id === $scope.selection.id; 
    }; 

    $scope.click = function(address) { 
    $scope.selection = address; 
    }; 
}]);

注意：從由@bri提供的解決方案部分提取。

來源

2016-01-28 00:53:32

試試這個（爲你的無線輸入）。原來，NG-重複是什麼把它扔關閉（你需要使用$ parent.selection）：

<input type="radio" ng-value="address" ng-model="$parent.selection"/>

我認爲它的工作你會用this update to your fiddle

初值希望的方式

Jeez。 我覺得自己像一個白癡，但我終於明白，角度無法告訴你最初的「選擇」與地址[0]相同。

所以 - 我不得不改變你設置$ scope.selection以及方式：

app.controller("SampleController", ['$scope', function($scope) { 
    $scope.addresses = [ 
    { id: 1, name: "Home" }, 
    { id: 2, name: "Work" }, 
    ]; 
    $scope.selection = $scope.addresses[0]; 
}]);

現在我們所有的設置。嘖......這是那些「隱藏在衆目睽睽下」的錯誤之一...

來源

2016-01-27 23:41:13 bri

感謝您的答案，但這樣做似乎首先改變了所選地址的'id'（在選項之間單擊幾次會中斷事物）。 –

這是更接近...你需要引用$ parent.selection（因爲收音機是在一個ng重複）。 – bri

啊，是的，我看到現在這些變化的工作 - 只是獲得最初的選擇。 –

的價值和模式應該是根據input[radio]文檔的字符串：

<input type="radio" ng-value="address.name" ng-model="selection.name" />

的jsfiddle演示：** https://jsfiddle.net/xczdcqx0/2/

來源

2016-01-27 23:51:14

感謝您的回答。這有點簡化，但我還想保留'selection.id'更新。我會更新我的問題以反映這一點。 –

角度單選按鈕而不是選擇

回答

相關問題