Question

我正在使用Angular JS开展项目。

我创建了一组单选按钮。他们的价值来自后端。

一切都很好。

唯一的问题是，如果我试图点击它们，就不会检查单选按钮。

他们没有被禁用。但他们仍然没有受到控制。

以下是我的HTML代码：

<div class="row">
    <div class="col-md-3 radio-vehicle">
        <label>Vehicle-3</label>
        <div ng-repeat="vehicle in vehicles">
            <input type="radio" name="vc1" value="{{vehicle.name}}" ng-change="updateCount()"
            ng-model="$parent.vh1" ng-disabled="dest3 === 'none'">
            {{vehicle.name}}&nbsp;({{vehicle.total_no}})
        </div>
    </div>
    <div class="col-md-3 radio-vehicle">
            <label>Vehicle-2</label>
            <div ng-repeat="vehicle in vehicles">
            <input type="radio" name="vc2" ng-change="updateCount()" ng-model="$parent.vh2" value="{{vehicle.name}}" ng-disabled="dest2 === 'none'" ng-checked="false">
            {{vehicle.name}}&nbsp;({{vehicle.total_no}})
            </div>
        </div>
        <div class="col-md-3 radio-vehicle">
            <label>Vehicle-3</label>
            <div ng-repeat="vehicle in vehicles">
            <input type="radio" name="vc3" ng-change="updateCount()" ng-model="$parent.vh3" value="{{vehicle.name}}" ng-disabled="dest3 === 'none'" ng-checked="false">
            {{vehicle.name}}&nbsp;({{vehicle.total_no}})
            </div>
        </div>
        <div class="col-md-3 radio-vehicle">
            <label>Vehicle-4</label>
            <div ng-repeat="vehicle in vehicles">
            <input type="radio" name="vc4" ng-change="updateCount()" ng-model="$parent.vh4"  value="{{vehicle.name}}" ng-disabled="dest4 === 'none'" ng-checked="false">
            {{vehicle.name}}&nbsp;({{vehicle.total_no}})
            </div>
        </div>
 </div>

这是我获取记录的服务：

https://findfalcone.herokuapp.com/vehicles

我正在添加我的应用程序的屏幕截图，以便您知道我想要实现的目标：

Answer 1

这是因为您的value属性和ng-model都包含不同的值。

请参阅，我更新了ng-model和value两者相同的代码。我通过ng-change函数传递了值，您可以在名为updateCount的函数中获取该函数。

 <div class="row">
    <div class="col-md-3 radio-vehicle">
        <label>Vehicle-3</label>
        <div ng-repeat="vehicle in vehicles">
            <input type="radio" name="vc3" value="{{vehicle.name}}" ng-change="updateCount(vehicle.name, 'Vehicle-3')"
            ng-model="vehicle.name" ng-disabled="dest3 === 'none'">
            {{vehicle.name}}&nbsp;({{vehicle.total_no}})
        </div>
    </div>
 </div>

Answer 2

需要将ng-model设置为"$parent.vh3"，然后您可以将所选单选按钮的值绑定到radio button group之外。

确保每个input type ="radio"按钮组的名称不同。

var app = angular.module("app", []).controller("ctrl", function($scope) {
  $scope.vehicles = [{
    name: 'A',
    total_no: 5
  }, {
    name: 'B',
    total_no: 15
  }, {
    name: 'C',
    total_no: 25
  }];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body ng-app="app" ng-controller="ctrl">
  <div class="row">
    <div class="col-md-3 radio-vehicle">
      <label>Vehicle-1</label>
      <div ng-repeat="vehicle in vehicles">
        <input type="radio" name="vc1" value="{{vehicle.name}}" ng-change="updateCount()" ng-model="$parent.vh1" ng-disabled="dest3 === 'none'"> {{vehicle.name}}&nbsp;({{vehicle.total_no}})
      </div>
    </div>
    <div class="col-md-3 radio-vehicle">
      <label>Vehicle-2</label>
      <div ng-repeat="vehicle in vehicles">
        <input type="radio" name="vc2" ng-change="updateCount()" ng-model="$parent.vh2" value="{{vehicle.name}}" ng-disabled="dest2 === 'none'" ng-checked="false"> {{vehicle.name}}&nbsp;({{vehicle.total_no}})
      </div>
    </div>
    <div class="col-md-3 radio-vehicle">
      <label>Vehicle-3</label>
      <div ng-repeat="vehicle in vehicles">
        <input type="radio" name="vc3" ng-change="updateCount()" ng-model="$parent.vh3" value="{{vehicle.name}}" ng-disabled="dest3 === 'none'" ng-checked="false"> {{vehicle.name}}&nbsp;({{vehicle.total_no}})
      </div>
    </div>
    <div class="col-md-3 radio-vehicle">
      <label>Vehicle-4</label>
      <div ng-repeat="vehicle in vehicles">
        <input type="radio" name="vc4" ng-change="updateCount()" ng-model="$parent.vh4" value="{{vehicle.name}}" ng-disabled="dest4 === 'none'" ng-checked="false"> {{vehicle.name}}&nbsp;({{vehicle.total_no}})
      </div>
    </div>
  </div>

  <pre> {{ vh1 }} {{ vh2 }} {{ vh3 }} {{ vh4 }}</pre>

</body>

Answer 3

您的ng-repeat正在创建子范围。因此vh3不会直接绑定到控制器的范围。您可以将变量绑定到对象或使用控制器作为语法，隐式处理点规则。

更多信息： What are the nuances of scope prototypal / prototypical inheritance in AngularJS?

var app = angular.module('plunker', []);

app.controller('ApplicationController', function($scope) {
    $scope.modelVal = {};
    $scope.vehicles = [{
        "name": "BMW",
        "total_no": 1
    }, {
        "name": "Porsche",
        "total_no": 2
    }]
    $scope.updateCount = function() {
        console.log($scope.modelVal)
    }
});

<!doctype html>
<html ng-app="plunker">

<head>
    <meta charset="utf-8">
    <title>AngularJS Plunker</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
</head>

<body>
    <div class="container" ng-controller="ApplicationController">
        <div class="row">
            <div class="col-md-3 radio-vehicle">
                <label>Vehicle-1</label>
                <div ng-repeat="vehicle in vehicles">
                    <input type="radio" name="vc1" ng-value="vehicle.name" ng-change="updateCount()" ng-model="modelVal.vh1" ng-disabled="dest3 === 'none'"> {{vehicle.name}}&nbsp;({{vehicle.total_no}})
                </div>
            </div>
            <div class="col-md-3 radio-vehicle">
                <label>Vehicle-2</label>
                <div ng-repeat="vehicle in vehicles">
                    <input type="radio" name="vc2" ng-value="vehicle.name" ng-change="updateCount()" ng-model="modelVal.vh2" ng-disabled="dest3 === 'none'"> {{vehicle.name}}&nbsp;({{vehicle.total_no}})
                </div>
            </div>
            <div class="col-md-3 radio-vehicle">
                <label>Vehicle-3</label>
                <div ng-repeat="vehicle in vehicles">
                    <input type="radio" name="vc3" ng-value="vehicle.name" ng-change="updateCount()" ng-model="modelVal.vh3" ng-disabled="dest3 === 'none'"> {{vehicle.name}}&nbsp;({{vehicle.total_no}})
                </div>
            </div>
        </div>
    </div>
</body>

</html>

未在Angular（1.x）

3 个答案: