Question

我有一个angularjs应用程序，它有一个基本上像这样的表单/控制器（归结为相关的东西）：

angular.module('testApp', [])
    .controller('testCtrl', function ($scope) {
    $scope.envelopes = [{
        id: 1,
        name: 'first',
        default_spend: '1'
    }, {
        id: 2,
        name: 'second',
        default_spend: '0'
    }, {
        id: 3,
        name: 'third',
        default_spend: '0'
    }, ];
});

表格大致如下：

<div ng-app="testApp">
    <div ng-controller="testCtrl">
        <div ng-repeat="envelope in envelopes">
            <div>{{envelope.name}}
                <input type="radio" name="default_spend" ng-model="envelope.default_spend" ng-value="1" /> 
                Default Spend: {{envelope.default_spend}}
            </div>
        </div>
    </div>
</div>

您可以使用this fiddle查看此操作。

如您所见，第一个信封被标记为default_spend信封，而另外两个信封则没有。当我选择一个不同的信封时，该信封也被标记为default_spend，但是当取消选择单选按钮时，模型值保持不变（“1”）。我知道由于ng-repeat，我在这里处理一个子范围，但有没有办法让我设置一个“未选择”的值，而不必通过ngChange跳过箍？

Answer 1

不是真的。当你使用ng-value时，它将被绑定到ng-model并且在你的情况下它们都具有值1.此外，我真的没有达到切换1和0的目的，但是你可以这样做： -

 <input type="radio" name="default_spend" 
      ng-click="selected.envelope = envelope" />  <!--Register an ng-click and set selected one
      Default Spend: {{getDefSpend(envelope)}}</div> <!-- Show the text based on selection-->

在你的控制器中： -

$scope.selected = {envelope: $scope.envelopes[0]};

$scope.getDefSpend = function(envelope){
   return $scope.selected.envelope === envelope ? 1 : 0; 
}

//$scope.selected.envelope will be your selected option at any point.

<强> Demo

Answer 2

这是因为你拥有的实际上是3个不同的模型值。要按照您的意愿工作，您将拥有所有3个模型值。您可以重新构建数据，也可以使用ng-change手动修改模型。

Angularjs中未选中的单选按钮值

2 个答案: