如何根据angularjs中的单选按钮有条件地设置文本字段

时间:2016-05-21 10:06:30

标签: javascript angularjs

我有3个单选按钮,根据收音机的点击,我必须有条件地设置文本字段。这是我的代码。

const int n = 3;
var small = new List();
for(var i=0; i<large.Count; i+=n)
{
    small.Clear();
    for(var j=i; j < n && j<large.Count; j++)
        small.Add(large[j]);
    // Do stuff with small
}

我可以选择单选按钮,但文本归档wallet.description未设置。

任何人都可以帮我解决这里的错误吗?

3 个答案:

答案 0 :(得分:0)

似乎Angular只是根据option.name更改div可见性,并且不处理此div中的元素。作为一个简单的解决方案,您可以在控制器中添加一些JavaScript逻辑。例如,将wallet.description设置为所需的值:

// don't forget to add some necessary checks 
var descriptions = ["first", "second", "third"];
wallet.description = descriptions[option.name];

答案 1 :(得分:0)

您所要做的就是将ng-value参数传递给另一个字符串。

所以我刚改变了你的

ng-value="Item not received for order"

ng-value="'Item not received for order'"

所以这是你的代码。

<tr>

  <td>Select One</td>

<td>

    <label>
      <input type="radio" ng-model="option.name" ng-value="1">
      Billpayment
    </label><br/>

    <label>
      <input type="radio" ng-model="option.name" ng-value="2">
      Item not delivered
    </label><br/>

    <label>
    <input type="radio" ng-model="option.name" ng-value="3"> 
      Cashback
    </label><br/>

    <tt>option = {{option.name | json}}</tt><br/>

</td>

</tr>

<TR>
            <div class="form-group">
                <TD>Order Id</TD>
                <TD>
                    <input class="form-control" type="text" required ng-model="wallet.oid" />
                </TD>
            </div>
        </TR>


<tr>
            <div class="form-group">
                <TD>Amount</TD>
                <TD>
      <input class="form-control" type="text" required ng-model="wallet.amount" />
                </TD>
            </div>
        </tr>

<tr>
            <div class="form-group">
                <TD>Description</TD>
                <TD>
        <div ng-if="option.name == 1">
            <input class="form-control" type="text" required ng-model="wallet.description" ng-value="'Bill payment for order'" />
        </div>

        <div ng-if="option.name == 2">
            <input class="form-control" type="text" required ng-model="wallet.description" ng-value="'Cashback for order'" />
        </div>

        <div ng-if="option.name == 3">
            <input class="form-control" type="text" required ng-model="wallet.description" ng-value="'Item not received for order'" />
        </div>


                </TD>
            </div>
        </tr>

答案 2 :(得分:0)

您不能将ng-valueng-model一起用于输入类型。此外,应避免使用所有无线电控制和输入类型的相同模型。他们会发生冲突。

无论如何,请看这里的工作人员: https://plnkr.co/edit/aykP54pTp64eGXFnp4em?p=preview

PS:html和控制台上有明确的错误,因为你现在不应该在<tr><td>内使用div,因为它们已经过时了。 利用angularJs提供的所有好处。请仔细阅读本文档以获取帮助:https://docs.angularjs.org/api/ng/directive