單選按鈕與ng-model的雙向綁定問題

我遇到了使用ng-model和ng-value單選按鈕雙向綁定的問題。我有三個單選按鈕，在ng-repeat內創建。它們都是相同的ng模型，$ scope.selectedItem，並且每個按鈕的ng值都是ng-repeat中的當前項目。這似乎工作正常。當我想在控制器中設置選定的項目時，問題就出現了。在這裏，我有一個NG-click事件選擇（），它會將selectedItem設置爲傳入的項目。單選按鈕與ng-model的雙向綁定問題

function MyCtrl($scope) { 
 
    $scope.list = [{ 
 
     id: 1 
 
    }, { 
 
     id: 2 
 
    }, { 
 
     id: 3 
 
    }]; 
 
    $scope.select = function (item) { 
 
     $scope.selectedItem = item; 
 
    } 
 
}

<div ng-repeat="item in list" class="interactive" ng-click="select(item)"> 
 
    <input type="radio" name="itemSelector" ng-model="selectedItem" ng-value="item" />  
 
    {{item.id}} 
 
</div>

這工作只要我只用選擇項目NG擊事件。如果我直接點擊＃1使用單選按鈕，然後使用ng-click事件選擇＃2，然後觸發＃1的ng-click事件，第二個單選按鈕將被取消選中，但第一個單選按鈕不會被選中。當我在調試器中觀察時，我可以看到selectedItem的值已成功設置，它只是未更新的單選按鈕。

我使用單選按鈕綁定的方式有什麼問題嗎？有沒有辦法來解決這個問題？

的jsfiddle：http://jsfiddle.net/SamGraber/vscvxg40/4/

來源

2014-11-05 Sam Graber

絕對是一個奇怪的行爲。我不確定是什麼原因導致你的問題，但在這裏看到一個解決方法http://jsfiddle.net/vscvxg40/9/。

注意這是推薦的HTML練習無論如何 - 包裝div現在是label，當點擊它時觸發無線電選擇。

來源

2014-11-05 20:25:37

@SebastienPiu是正確的，底層的問題是繼承父範圍中的模型在第一次從子範圍設置後被子範圍遮蔽。 – 2014-11-05 20:29:41

該解決方案運行良好，但使用ng-click事件觸發單選按鈕的想法是，我可以在div樣式中將它用作表格行。以同樣的方式使用標籤似乎有點不妥。有任何想法嗎？ – 2014-11-05 20:47:44

@SamGraber我已經將Sebastien的想法應用到了http://jsfiddle.net/vscvxg40/10/的代碼中。現在，雖然'ng-repeat'創建了一個子範圍，但是'input's引用父範圍的'selectedItem'作爲它的'ng-model'。既然'div'和'input'現在都引用了同一個模型，那麼就沒有你之前看到的衝突。 – 2014-11-05 22:35:55

這裏是一個解決您的問題 http://jsfiddle.net/paila/7ax5tspc/

的問題是與將selectedItem變量對控制範圍的範圍小提琴。

當使用ng-repeat生成單選按鈕，並且更改了selectedItem時，每個子作用域都會創建一個新變量，並且控制器作用域上的selectedItem永遠不會被修改。

使用一個對象來保存所選項目的值將解決此問題。當您這樣做時，子範圍可以覆蓋對象屬性，並且它們會反射回父控制器範圍。

var myApp = angular.module('myApp', []); 

    function MyCtrl($scope) { 
     $scope.list = [{ 
      id: 1 
     }, { 
      id: 2 
     }, { 
      id: 3 
     }]; 
     $scope.selected = {}; 
     $scope.selected.Item = $scope.list[0]; 
    }

來源

2014-11-05 19:51:25

更新http://jsfiddle.net/vscvxg40/7/ – 2014-11-05 20:02:03

這不回答這個問題。點擊「輸入」不是問題。 – 2014-11-05 20:26:34

ng-repeat創建一個子範圍，所以你只需要NG-模型綁定到$parent範圍。根本不需要ng-click，因爲ng-model已經爲你做了雙向綁定。在這裏看到小提琴http://jsfiddle.net/d1570gfk/1/

<div ng-repeat="item in list" class="interactive"> 
    <input type="radio" name="itemSelector" ng-model="$parent.selectedItem" ng-value="item" /{{item.id}} 
</div>

來源

2014-11-05 20:10:36

單選按鈕與ng-model的雙向綁定問題

回答

相關問題