"기타"또는 "모두 잡기"라디오 버튼을 만드는 방법은 무엇입니까?

Question

사용자를위한 몇 가지 기본 옵션을 제시하고자하지만 사용자가 자신의 값을 입력 할 수있게하려고한다고 가정합니다.

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="???"> 

당신이 여기서 뭘 할 건데?

내가 입력 상자를 활성화하고 그래서

<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"> 

같은 다른 무선 확인란을 것입니다 기본 옵션은 사실에 $ scope.isOther를 변경하도록 NG 변화에 액션을 트리거 구현을했다

그런 종류의 작품. 그러나 페이지/데이터를 다시로드 할 때 "다른"값을 입력하면 "다른"값이 입력 상자에 있지만 "다른"을 자동으로 확인하지 않습니다. 나는 데이터를로드 할 때 isOther 값을 변경하는 코드를 더 작성할 수는 있지만 올바른 방법인지 또는 "체크"할 라디오 박스를 허용하는 "catch all"이 있는지 궁금해하고있다. 다른 값과 일치하지 않습니다.

Answer 1

내가 완벽한 대답을 필요는 없습니다,하지만 난 이런 식

을하고 결국 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

한 단점은 당신이 "기타"입력 상자에 표준 과일을 입력하면, 다음 여러 라디오 버튼을 선택하는 것입니다. '다른'버튼을 선택 취소 할 수 있지만 표준 과일을 접두사로 포함하는 과일을 입력 할 수 없습니다 (예 : "사과 배"를 입력 할 수 없음).

누군가가 더 나은 대답, 나는 내 투표와 대답을 바꿀 것이다

Answer 2

귀하는이 방법으로 수행 할 수 있습니다

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

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

 
    $scope.fruits = ['apple', 'orange', 'plum', 'pear']; 
 
\t $scope.fruit = {selectedOption: 'orange'}; 
 
    
 
    $scope.isDisabled = function() { 
 
    if (_.contains($scope.fruits, $scope.fruit.selectedOption)) { 
 
     return true; 
 
    } 
 
    return false; 
 
    }; 
 

 
    $scope.add = function() { 
 
    \t if($scope.x !== undefined && $scope.x !== '') { 
 
    \t $scope.fruits.push($scope.x); 
 
    \t $scope.fruit.selectedOption = $scope.x; 
 
     $scope.x = ''; 
 
    }  
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<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.selectedOption" value={{f}}> {{f}} 
 
    </div> 
 
    <input type="radio" name="fruit" ng-model="fruit.selectedOption" value="other"> Other: 
 
    <input type="text" ng-model="x" ng-disabled="isDisabled()" ng-blur="add()"> 
 
    <br> fruit = {{fruit.selectedOption}} 
 
    </form> 
 
</div>

JSFiddle