Javascript 使用AngularJS中的单选按钮控制输入字段

我有以下想法。我的视图包含3个输入字段和单选按钮，它们需要相互作用

首先，当显示视图时，您只能看到输入字段。如果用户单击其中一个输入字段，则会禁用其他字段，并显示此输入字段的单选按钮。如果用户希望使用这三个输入字段中的其他输入字段，则需要单击其中一个单选按钮，然后其他两个输入字段将被禁用

以下是当前代码：

...
<input type="text" name="Id" ng-model="search.id" ng-click="disabled = !disabled" ng-disabled="..." />
<input type="radio" class="radio" ng-hide="!disabled" />
...
<input type="text" name="Name" ng-model="search.name" ng-click="disabled = !disabled" ng-disabled="disabled" />
<input type="radio" class="radio" ng-hide="!disabled" />
...
<input type="text" name="Age" ng-model="search.age" ng-click="disabled = !disabled" ng-disabled="disabled" />
<input type="radio" class="radio" ng-hide="!disabled" />

。。。
...
...

---

我怎么能意识到这一点？当前，第一个输入字段可以工作。

这当然可以工作，只需确保为每个控件使用不同的$scope变量：

<input type="text" name="Id" ng-model="search.id" ng-click="disabledId = !disabledId" ng-disabled="disabledId" />
<input type="radio" class="radio" ng-show="disabledId" ng-click="disabledName = true; disabledId=false; disabledAge=true"/>
...
<input type="text" name="Name" ng-model="search.name" ng-click="disabledName = !disabledName" ng-disabled="disabledName" />
<input type="radio" class="radio" ng-show="disabledName" ng-click="disabledName = false; disabledId=true; disabledAge=true"/>
...
<input type="text" name="Age" ng-model="search.age" ng-click="disabledAge = !disabledAge" ng-disabled="disabledAge" />
<input type="radio" class="radio" ng-show="disabledAge" ng-click="disabledAge=false; disabledId = true; disabledName=true"/>

...
...

虽然这应该在这里起作用，但我建议不要在HTML中添加太多JS代码，最好在$scope上添加一个方法，比如

$scope.radioClicked（buttonId）

，然后在ng click上调用此方法

---

另外，使用ng show而不是ng hide有助于可读性-无双重否定。

这当然可以工作，只需确保为每个控件使用不同的$scope变量：

<input type="text" name="Id" ng-model="search.id" ng-click="disabledId = !disabledId" ng-disabled="disabledId" />
<input type="radio" class="radio" ng-show="disabledId" ng-click="disabledName = true; disabledId=false; disabledAge=true"/>
...
<input type="text" name="Name" ng-model="search.name" ng-click="disabledName = !disabledName" ng-disabled="disabledName" />
<input type="radio" class="radio" ng-show="disabledName" ng-click="disabledName = false; disabledId=true; disabledAge=true"/>
...
<input type="text" name="Age" ng-model="search.age" ng-click="disabledAge = !disabledAge" ng-disabled="disabledAge" />
<input type="radio" class="radio" ng-show="disabledAge" ng-click="disabledAge=false; disabledId = true; disabledName=true"/>

...
...

虽然这应该在这里起作用，但我建议不要在HTML中添加太多JS代码，最好在$scope上添加一个方法，比如

$scope.radioClicked（buttonId）

，然后在ng click上调用此方法

---

另外，使用ng show而不是ng hide有助于可读性-无双重否定。

这当然可以工作，只需确保为每个控件使用不同的$scope变量：

<input type="text" name="Id" ng-model="search.id" ng-click="disabledId = !disabledId" ng-disabled="disabledId" />
<input type="radio" class="radio" ng-show="disabledId" ng-click="disabledName = true; disabledId=false; disabledAge=true"/>
...
<input type="text" name="Name" ng-model="search.name" ng-click="disabledName = !disabledName" ng-disabled="disabledName" />
<input type="radio" class="radio" ng-show="disabledName" ng-click="disabledName = false; disabledId=true; disabledAge=true"/>
...
<input type="text" name="Age" ng-model="search.age" ng-click="disabledAge = !disabledAge" ng-disabled="disabledAge" />
<input type="radio" class="radio" ng-show="disabledAge" ng-click="disabledAge=false; disabledId = true; disabledName=true"/>

...
...

虽然这应该在这里起作用，但我建议不要在HTML中添加太多JS代码，最好在$scope上添加一个方法，比如

$scope.radioClicked（buttonId）

，然后在ng click上调用此方法

---

另外，使用ng show而不是ng hide有助于可读性-无双重否定。

这当然可以工作，只需确保为每个控件使用不同的$scope变量：

<input type="text" name="Id" ng-model="search.id" ng-click="disabledId = !disabledId" ng-disabled="disabledId" />
<input type="radio" class="radio" ng-show="disabledId" ng-click="disabledName = true; disabledId=false; disabledAge=true"/>
...
<input type="text" name="Name" ng-model="search.name" ng-click="disabledName = !disabledName" ng-disabled="disabledName" />
<input type="radio" class="radio" ng-show="disabledName" ng-click="disabledName = false; disabledId=true; disabledAge=true"/>
...
<input type="text" name="Age" ng-model="search.age" ng-click="disabledAge = !disabledAge" ng-disabled="disabledAge" />
<input type="radio" class="radio" ng-show="disabledAge" ng-click="disabledAge=false; disabledId = true; disabledName=true"/>

...
...

虽然这应该在这里起作用，但我建议不要在HTML中添加太多JS代码，最好在$scope上添加一个方法，比如

$scope.radioClicked（buttonId）

，然后在ng click上调用此方法

---

另外，使用ng show而不是ng hide有助于可读性-无双重否定。

尝试为禁用的

指定一个值。

...
<input type="text" name="Id" ng-model="search.id" ng-click="disabled = 1" ng-disabled="disabled!=1" />
<input type="radio" class="radio" ng-hide="disabled==1" />
...
<input type="text" name="Name" ng-model="search.name" ng-click="disabled = 2" ng-disabled="disabled!=2" />
<input type="radio" class="radio" ng-hide="disabled==2" />
...
<input type="text" name="Age" ng-model="search.age" ng-click="disabled = 3" ng-disabled="disabled!=3" />
<input type="radio" class="radio" ng-hide="disabled==3" />

。。。
...
...

尝试为禁用的

指定一个值

...
<input type="text" name="Id" ng-model="search.id" ng-click="disabled = 1" ng-disabled="disabled!=1" />
<input type="radio" class="radio" ng-hide="disabled==1" />
...
<input type="text" name="Name" ng-model="search.name" ng-click="disabled = 2" ng-disabled="disabled!=2" />
<input type="radio" class="radio" ng-hide="disabled==2" />
...
<input type="text" name="Age" ng-model="search.age" ng-click="disabled = 3" ng-disabled="disabled!=3" />
<input type="radio" class="radio" ng-hide="disabled==3" />

。。。
...
...
尝试为禁用的
指定一个值

...
<input type="text" name="Id" ng-model="search.id" ng-click="disabled = 1" ng-disabled="disabled!=1" />
<input type="radio" class="radio" ng-hide="disabled==1" />
...
<input type="text" name="Name" ng-model="search.name" ng-click="disabled = 2" ng-disabled="disabled!=2" />
<input type="radio" class="radio" ng-hide="disabled==2" />
...
<input type="text" name="Age" ng-model="search.age" ng-click="disabled = 3" ng-disabled="disabled!=3" />
<input type="radio" class="radio" ng-hide="disabled==3" />

。。。
...
...
尝试为禁用的
指定一个值

...
<input type="text" name="Id" ng-model="search.id" ng-click="disabled = 1" ng-disabled="disabled!=1" />
<input type="radio" class="radio" ng-hide="disabled==1" />
...
<input type="text" name="Name" ng-model="search.name" ng-click="disabled = 2" ng-disabled="disabled!=2" />
<input type="radio" class="radio" ng-hide="disabled==2" />
...
<input type="text" name="Age" ng-model="search.age" ng-click="disabled = 3" ng-disabled="disabled!=3" />
<input type="radio" class="radio" ng-hide="disabled==3" />

。。。
...
...
我更改了输入字段。这是一个可能的解决方案，但只有我需要与单选按钮和输入字段的交互

<input type="text" name="Id" ng-model="search.id" ng-click="nameDis = !nameDis;ageDis = !ageDis" ng-disabled="idDis" />
<input type="radio" class="radio" ng-hide="!idDis" />
...
<input type="text" name="Name" ng-model="search.name" ng-click="idDis = !idDis;ageDis = !ageDis" ng-disabled="nameDis" />
<input type="radio" class="radio" ng-hide="!nameDis" />
...
<input type="text" name="Age" ng-model="search.age" ng-click="nameDis = !nameDis;idDis = !idDis" ng-disabled="ageDis" />
<input type="radio" class="radio" ng-hide="!ageDis" />


...
...
我更改了输入字段。这是一个可能的解决方案，但只有我需要与单选按钮和输入字段的交互

<input type="text" name="Id" ng-model="search.id" ng-click="nameDis = !nameDis;ageDis = !ageDis" ng-disabled="idDis" />
<input type="radio" class="radio" ng-hide="!idDis" />
...
<input type="text" name="Name" ng-model="search.name" ng-click="idDis = !idDis;ageDis = !ageDis" ng-disabled="nameDis" />
<input type="radio" class="radio" ng-hide="!nameDis" />
...
<input type="text" name="Age" ng-model="search.age" ng-click="nameDis = !nameDis;idDis = !idDis" ng-disabled="ageDis" />
<input type="radio" class="radio" ng-hide="!ageDis" />


...
...
我更改了输入字段。这是一个可能的解决方案，但只有我需要与单选按钮和输入字段的交互

<input type="text" name="Id" ng-model="search.id" ng-click="nameDis = !nameDis;ageDis = !ageDis" ng-disabled="idDis" />
<input type="radio" class="radio" ng-hide="!idDis" />
...
<input type="text" name="Name" ng-model="search.name" ng-click="idDis = !idDis;ageDis = !ageDis" ng-disabled="nameDis" />
<input type="radio" class="radio" ng-hide="!nameDis" />
...
<input type="text" name="Age" ng-model="search.age" ng-click="nameDis = !nameDis;idDis = !idDis" ng-disabled="ageDis" />
<input type="radio" class="radio" ng-hide="!ageDis" />


...
...
我更改了输入字段。这是一个可能的解决方案，但只有我需要与单选按钮和输入字段的交互

<input type="text" name="Id" ng-model="search.id" ng-click="nameDis = !nameDis;ageDis = !ageDis" ng-disabled="idDis" />
<input type="radio" class="radio" ng-hide="!idDis" />
...
<input type="text" name="Name" ng-model="search.name" ng-click="idDis = !idDis;ageDis = !ageDis" ng-disabled="nameDis" />
<input type="radio" class="radio" ng-hide="!nameDis" />
...
<input type="text" name="Age" ng-model="search.age" ng-click="nameDis = !nameDis;idDis = !idDis" ng-disabled="ageDis" />
<input type="radio" class="radio" ng-hide="!ageDis" />


...
...
您想要文本输入被禁用或消失？您想要文本输入被禁用或消失？您想要文本输入被禁用或消失？您想要文本输入被禁用或消失？我将尝试您的解决方案。谢谢：）你认为switch语句有用吗？这个解决方案有效吗？如果没有，问题是什么？为什么您要询问switch语句？（当然，您可以使用switch语句，有几十种方法可以做到这一点），因为我已经编辑了表单并使用了一个名为
disabled（）
的方法。现在，禁用的方法为每个输入字段发送一个项。在我的例子中，数字1、2和3。在我的控制器中是disabled（）-方法，该项将使用switch语句进行检查<代码>案例1:$scope.disabledId=false$scope.disabledName=true$scope.disabledAge=true等等。这是个好办法吗？我试试你的办法。谢谢：）你认为switch语句有用吗？这个解决方案有效吗？如果没有，问题是什么？为什么您要询问switch语句？（当然，您可以使用switch语句，有几十种方法可以做到这一点），因为我已经编辑了表单并使用了一个名为
disabled（）
的方法。现在，禁用的方法为每个输入字段发送一个项。在我的例子中，数字1、2和3。在我的控制器中是disabled（）-方法，该项将使用switch语句进行检查<代码>案例1:$scope.disabledId=false$scope.disabledName=true$scope.disabledAge=true等等。这是个好办法吗？我试试你的办法。谢谢：）你认为switch语句有用吗？这个解决方案有效吗？如果没有，问题是什么？为什么您要询问switch语句？（当然，您可以使用switch语句，有几十种方法可以做到这一点），因为我已经编辑了表单并使用了一个名为
disabled（）
的方法。现在，禁用的方法为每个输入字段发送一个项。在我的例子中，数字1、2和3。在我的控制器中是disabled（）-方法，该项将使用switch语句进行检查<代码>案例1:$scope.disabledId=false$scope.disabledName=true$scope.disabledAge=true等等。这是个好办法吗？我试试你的办法。谢谢：）你认为switch语句有用吗？这个解决方案有效吗？如果没有，问题是什么？为什么您要询问switch语句？（当然，您可以使用switch语句，有几十种方法可以做到这一点），因为我已经编辑了表单并使用了一个名为
disabled（）
的方法。现在，禁用的方法为每个输入字段发送一个项。在我的例子中，数字1、2和3。在我的控制器中是disabled（）-方法和w项