Question

假设我想为用户提供一些默认选项，但也希望允许他们输入自己的值。

e.g。

Please select one of the following:
[ ] apple
[ ] pear
[ ] other: ___________

我希望如果选择“其他”，则应启用后面的输入字段并允许输入。

Html可能如下所示：

    <input type="radio"
             name="fruit"
             ng-model="fruit"
             value="apple"
             > apple
    <input type="radio"
             name="fruit"
             ng-model="fruit"
             value="pear"
             > pear
      <input type="radio"
             name="fruit"
             ng-model="???"
             value="???"
             > Other:
    <input type="text"
             class="form-control"
             ng-model="fruit"
             ng-disabled="???">

你会在这做什么？

我有一个实现，其中默认选项触发对ng-change的操作，以便将$ scope.isOther更改为true，这将启用输入框并检查其他单选框如此

    <input type="radio"
             name="fruit"
             ng-model="fruit"
             value="apple"
             ng-change="isOther=true"
             > apple
    <input type="radio"
             name="fruit"
             ng-model="fruit"
             value="pear"
             ng-change="isOther=true"
             > pear
      <input type="radio"
             name="fruit"
             ng-model="isOther"
             ng-change="fruit=null"
             value="true"
             > Other:
    <input type="text"
             class="form-control"
             ng-model="fruit"
             ng-disabled="!isOther">

那种作品。但是当我重新加载页面/数据时，如果我输入了“其他”值，它就不知道自动检查“其他”，尽管我的“其他”值在输入框中。当我加载数据时，我可以写一些代码更改isOther值，但我想知道我是否正确地采用了这种方式，或者是否有“全部捕获”允许检查无线电盒是否存在它与任何其他值都不匹配。

Answer 1

你可以这样做：

<form id="myForm">
  <input type="number" placeholder="Valore 1" required>
  <input type="number" placeholder="Valore 2" required>
  <input type="number" placeholder="Valore 3 (se presente)">
  <input type="number" placeholder="Valore 4 (se presente)">
  <input type="number" placeholder="Valore 5 (se presente)">
  <input type="number" placeholder="Valore 6 (se presente)">
  <button id="b" class="btn btn-primary">Applica</button>
</form>
<div id="risultato"></div>

var myapp = angular.module('myApp', []);

myapp.controller('MyController', function($scope) {

  $scope.fruits = ['apple', 'orange', 'plum', 'pear'];
	$scope.fruit = {selectedOption: 'orange'};  
  
  $scope.isDisabled = function() {
    if (_.contains($scope.fruits, $scope.fruit.selectedOption)) {
      return true;
    }
    return false;
  };

  $scope.add = function() {
  	if($scope.x !== undefined && $scope.x !== '') {
    	$scope.fruits.push($scope.x);
    	$scope.fruit.selectedOption = $scope.x;
      $scope.x = '';
    }    
  }
});

JSFiddle

Answer 2

我没有完美的答案，但我最终这样做了

HTML：

<div id='main' ng-app='myApp'>
  <form name="myForm" ng-controller="MyController">
    <div ng-repeat="f in fruits track by $index">
      <input type="radio" name="fruit" ng-model="fruit.value" ng-value="f" ng-change="disableOther()"> {{f}}
    </div>
    <input type="radio" name="otherfruit" ng-change="fruit.value=null" ng-model="isOther" ng-value="true"> Other:
    <input type="text" ng-model="fruit.value" ng-change="checkOther()" ng-class="{'disabled-input':isStandardFruit()}">
    <br> fruit = {{fruit.value}}
  </form>
</div>

代码：

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

myapp.controller('MyController', function($scope) {

  $scope.fruits = ['apple', 'orange', 'plum', 'pear'];
    $scope.fruit = {value:'orange'};  

  $scope.isStandardFruit = function() {
    for(var i=0; i<$scope.fruits.length; i++) {
      if( $scope.fruits[i] == $scope.fruit.value ) {
        return true;
      }
    }
    return false;
  }

    $scope.disableOther = function() {
      $scope.isOther = false;
    }

    $scope.checkOther = function() {
      if( !$scope.isStandardFruit() ) {
        $scope.isOther = true;
      }
    }  
});

JSFiddle

一个缺点是如果你在＆＃34;其他＆＃34;输入框，然后选择多个单选按钮。我可以取消选中＆＃34;其他＆＃34;按钮但是你不能输入含有标准水果作为前缀的水果（例如，你不能输入＆＃34;苹果梨＆＃34;）

如果有人能提出更好的答案，我会改变我的投票和答案

如何创建“其他”或“全部捕获”单选按钮？

2 个答案: