Взаимоисключающий переключатель и соответствующее поле ввода

Question

Взаимоисключающий переключатель и соответствующее поле ввода

0

Привет, у меня есть следующий html:

<td>
  <div class="input-group" ng-cloak>
    <table>
      <tr>
        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sys/Prod/Proc :</td>
        <td width="10px"></td>
        <td>
          <input type="radio" name="radio" ng-model="sys" value="System/Product/Process" />
        </td>
        <td width="10px"></td>
        <td>
          <input type="text" ng-model="sys" class="form-control" />
        </td>
      </tr>
      <tr height="10px"></tr>
      <tr>
        <td>Sub-Sys/Prod/Proc :</td>
        <td width="10px"></td>
        <td>
          <input type="radio" ng-model="sub_sys" name="radio" value="Sub-system/Product/Process" />
        </td>
        <td width="10px"></td>
        <td>
          <input type="text" ng-model="sub_sys" class="form-control" />
        </td>
      </tr>
      <tr height="10px"></tr>
      <tr>
        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Component :</td>
        <td width="10px"></td>
        <td>
          <input type="radio" ng-model="comp" name="radio" value="Component" />
        </td>
        <td width="10px"></td>
        <td>
          <input type="text" ng-model="comp" class="form-control" />
        </td>
      </tr>
    </table>
  </div>
</td>

У меня есть 3 переключателя и соответствующие поля ввода. Одновременно может быть выбрана одна из комбинаций радиовхода. И радио, и поле ввода имеют одну и ту же ng-модель, просто для отображения значения переключателя в поле ввода (пользователь может редактировать поле ввода, если захочет). Но проблема в том, что когда я выбираю радиокнопку, это значение действительно копируется в поле ввода, но не очищается, как только пользователь нажимает на другой переключатель. Как я могу это исправить? Есть идеи, ребята?

vellattukudy 18 май 2016, в 12:10

Источник

0

Используйте ng-if по вашему мнению
Pravesh Khatri 18 май 2016, в 10:15

Теги:

javascript

html

angularjs

forms

2 ответа

0

Просто внес некоторые изменения

<table ng-init="super.comp='Component'; super.sub_sys='Sub-system/Product/Process';super.sys='System/Product/Process'">
<tr>
  <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sys/Prod/Proc :</td>
  <td width="10px"></td>
  <td>
    <input type="radio" name="radio" ng-click='selected=super.sys' ng-model="super.sys" value="{{super.sys}}" />
  </td>
  <td width="10px"></td>
  <td>
    <input type="text" ng-change="selected=super.sys" ng-show="selected==super.sys"  ng-model="super.sys" class="form-control" />
    <input type="text" ng-show="selected!==super.sys" readonly="readonly" class="form-control" />
  </td>
</tr>
<tr height="10px"></tr>
<tr>
  <td>Sub-Sys/Prod/Proc :</td>
  <td width="10px"></td>
  <td>
    <input type="radio" ng-model="super.sub_sys" ng-click="selected=super.sub_sys" name="radio" value="{{super.sub_sys}}" />
  </td>
  <td width="10px"></td>
  <td>
    <input type="text" ng-show="selected==super.sub_sys" ng-change="selected=super.sub_sys" ng-model="super.sub_sys" class="form-control" />
    <input type="text" ng-show="selected!==super.sub_sys" readonly="readonly" class="form-control" />
  </td>
</tr>
<tr height="10px"></tr>
<tr>           
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Component :</td>
  <td width="10px"></td>
  <td>
    <input type="radio" ng-model="super.comp" ng-click='selected= super.comp' name="radio" value="{{super.comp}}" />
  </td>
  <td width="10px"></td>
  <td>
    <input type="text" ng-show="selected==super.comp" ng-change="selected=super.comp" ng-model="super.comp" class="form-control" />
    <input type="text" ng-show="selected!==super.comp" readonly="readonly" class="form-control" />
  </td>
</tr>
</table>

Nagender Rawat 18 май 2016, в 07:54

Ещё вопросы

Используйте ng-if по вашему мнению

Suneet Bansal · Accepted Answer · 2016-05-18T07-35-00.000Z

Вы можете попробовать под кодом:

    <div ng-controller="myCntrl">
     <table>
     <tr>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sys/Prod/Proc :</td>
                    <td width="10px"></td>
                    <td>
                      <input type="radio" name="radio" ng-model="sys" value="System/Product/Process" ng-click="sysRadioClick();"/>
                    </td>
                    <td width="10px"></td>
                    <td>
                      <input type="text" ng-model="sys" class="form-control" />
                    </td>
                  </tr>
                  <tr height="10px"></tr>
                  <tr>
                    <td>Sub-Sys/Prod/Proc :</td>
                    <td width="10px"></td>
                    <td>
                      <input type="radio" ng-model="sub_sys" name="radio" value="Sub-system/Product/Process" ng-click="subSysRadioClick();"/>
                    </td>
                    <td width="10px"></td>
                    <td>
                      <input type="text" ng-model="sub_sys" class="form-control" />
                    </td>
                  </tr>
                  <tr height="10px"></tr>
                  <tr>
                    <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Component :</td>
                    <td width="10px"></td>
                    <td>
                      <input type="radio" ng-model="comp" name="radio" value="Component" ng-click="compRadioClick();" />
                    </td>
                    <td width="10px"></td>
                    <td>
                      <input type="text" ng-model="comp" class="form-control" />
                    </td>
                  </tr>
                </table>
              </div>
            </td>
</tr>
</table>
</div>

Сделайте один контроллер "myCntrl", как показано ниже:

app.controller('myCntrl', function($scope){
   $scope.sysRadioClick = function() {
                    $scope.sub_sys = '';
                    $scope.comp = '';
                };

                $scope.subSysRadioClick = function() {
                    $scope.sys = '';
                    $scope.comp = '';
                };


                $scope.compRadioClick = function() {
                    $scope.sub_sys = '';
                    $scope.sys = '';
                };
});

И вы закончили !!!