Question

我尝试在我的应用中使用此Angularjs example页面中的示例代码进行输入[radio]。我选择将对象用作特定单选按钮的值，因此组中的每个单选按钮都具有某个对象的值。

在plunkr example中，如果将模型设置为绿色，则为：

$scope.color = {
  name: 'green'
};

默认情况下不会选中正确的单选按钮。我认为是因为这个单选按钮的值是一个对象。

任何想法如何使它工作？如果其值是对象，如何检查正确的单选按钮？

Answer 1

您需要将模型ngValue引用到$scope.specialValue = { id: '12345', value: 'green' }; $scope.color = { name: $scope.specialValue };指令中定义的“绿色”对象：

ngValue

因为specialValue指令绑定到<label> <input type="radio" ng-model="color.name" ng-value="specialValue"> Green </label>

<p class="p1">Select a value</p>
<p class="p2">Select a value</p>
  <p class="p3">Select a value</p>
  <p class="p4">Select a value</p>

<select>
<option value="a">Option one</option>
<option value="b">Option two</option>
</select>

  <input type="checkbox" value="C" />


$('input').on('change', function(){

  $('.p1').text(function() { 
    return $('option:selected').text();
  });

  $('.p2').text(function() { 
    return $('option:checked').text();
  });

  $('.p3').text(function() { 
    return $('input[type="checkbox"]:selected').val();
  });

   $('.p4').text(function() { 
    return $('input[type="checkbox"]:checked').val();
  });
});

这是here。

Answer 2

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-radio-input-directive-production</title>
  

  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
  

  
</head>
<body ng-app="radioExample">
  <script>
  angular.module('radioExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.specialValue = {
        "id": "12345",
        "value": "green"
      };
      $scope.color = {
        name: $scope.specialValue
      };
    }]);
</script>
<form name="myForm" ng-controller="ExampleController">
  <label>
    <input type="radio" ng-model="color.name" value="red">
    Red
  </label><br/>
  <label>
    <input type="radio" ng-model="color.name" ng-value="specialValue" checked=checked>
    Green
  </label><br/>
  <label>
    <input type="radio" ng-model="color.name" value="blue">
    Blue
  </label><br/>
  <tt>color = {{color.name | json}}</tt><br/>
 </form>
 Note that `ng-value="specialValue"` sets radio item's value to be the value of `$scope.specialValue`.
</body>
</html>

<!-- 
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

如何根据模型自定义值检查无线电

2 个答案: