單選按鈕模型爲真/假（選中/取消選中）

我試圖將單選按鈕綁定到true，當單選按鈕被選中時，並且當單選按鈕未被選中時將其設置爲false。我必須錯過一些非常明顯的事情，因爲我還沒有做到。單選按鈕模型爲真/假（選中/取消選中）

我有一個簡單的集合，例如：

$scope.collection = [ 
    { id: 1, selected: true}, 
    { id: 2, selected: false}, 
    { id: 3, selected: false}];

而且我希望將「選擇」屬性綁定的單選按鈕是否被選中與否。聽起來很簡單，但ng-model綁定到undefined。 NG-檢查差不多的作品，它會顯示正確的結果，但實際上從未更新值...

Plunkr with the problem

來源

2014-12-04 Cosme Benito

這聽起來很簡單，只是你想讓單選按鈕像複選框一樣工作。您可能必須使用ng-change來更新控制器上選定的值。 – Owen 2014-12-04 16:54:25

我試圖做ng-change的工作，但由於它依賴於ng-model，所以我得不到一個積極的結果。我用ng-click實現了一些邏輯來繞過這個問題，但我覺得這個問題很簡單，它必須有一個簡單而乾淨的解決方案。 – 2014-12-04 18:07:42

您可以從控制器$scope單選按鈕綁定到正確的對象字段：

angular.module('ExampleApp', []) 

.controller('ExampleCtrl', ['$scope', function ($scope) { 
    $scope.radioContent = [ 
     {txt: 'One', checked: false}, 
     {txt: 'Two', checked: false} 
    ]; 
    $scope.$watch('radioContent', function (now, then) { 
     console.debug('Something changed', now); 
    }, true); 
}]);

和HTML：

<div ng-app="ExampleApp" ng-controller="ExampleCtrl"> 
    <div ng-repeat="radio in radioContent"> 
     <input type="radio" ng-model="radio.checked">{{radio.txt}} 
    </div> 
</div>

這裏的工作Fiddle

來源

2014-12-04 15:59:04 Ashesh

這個例子並不能很好地工作。我編輯你的小提琴並在這裏分叉：http://jsfiddle.net/ppb2yg7y/ 正如你所看到的，我將一個選中的值更改爲true，並添加了一個帶有選中值的文本，用於調試。無線電的初始狀態不正確（沒有選擇），ng模型設置未定義的值。當然，你會得到change事件，但是在console.debug中，你也可以得到未定義的值......我可以強制改變watch函數中的值，但它並不認爲這是正確的方法。有沒有乾淨的雙向數據綁定方式？：\ – 2014-12-04 16:07:40

@CosmeBenito謝謝，但它只是一個關於如何使用'ng-model'進行綁定的簡單示例。 – Ashesh 2014-12-04 16:11:59

我很欣賞你的時間和精力，但它並沒有真正的約束力，因爲結果總是沒有定義：P我已經到了這一點，但「拒絕」相信這是最佳的方式。 – 2014-12-04 16:16:32

看起來像ng-bind和ng-selected對單選按鈕不能很好地工作，但如果將單選按鈕更改爲複選框，代碼將按預期工作。

並使用@Ashesh的答案，一個按鈕的radio.checked屬性仍然成爲未定義後單選按鈕一次。

Working plunkr

<!DOCTYPE html> 
<html> 
    <head> 
    <script data-require="[email protected]*" 
      data-semver="1.3.0-beta.5" 
      src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script> 
    <script> 
     angular.module("sampleapp", []) 
     .controller('samplecontroller', function($scope,$rootScope) { 
     $scope.collection = [ 
      { id: 1, selected: true}, 
      { id: 2, selected: false}, 
      { id: 3, selected: false}]; 
     }); 
    </script> 

    </head> 
    <body ng-app="sampleapp" ng-controller="samplecontroller"> 
    <div class="radio" ng-repeat="element in collection"> 
     <span ng-bind="element.id"></span> 
     <span ng-bind="element.selected"></span> 
     <input type="checkbox" name="whatever" ng-model="element.selected"> 
    </div> 
    </body> 
</html>

但是，如果你選擇的物業變成true或false和不"true"或"false"，它的工作原理。

來源

2014-12-04 16:17:58 mutlei

是的，的確如此。但是，我不想讓用戶認爲他可以選擇多個選項。 – 2014-12-04 16:22:08

玩過我的小提琴後，似乎點擊一個單選按鈕後，item.selected屬性就會消失。 – mutlei 2014-12-04 16:28:11

是的，因爲ng-model綁定到undefined。 – 2014-12-04 16:34:41

單選按鈕模型爲真/假（選中/取消選中）

回答

相關問題