【问题标题】:AngularJs: ng-init in radio buttonAngularJs:单选按钮中的 ng-init
【发布时间】:2017-10-12 23:34:45
【问题描述】:

我正在尝试显示用户列表。我需要使用禁用的填充输入,包括名字、姓氏、电子邮件和带有单选按钮的最后一个属性。 我可以轻松地显示姓名和电子邮件列表,但我没有成功显示良好的选中按钮。我尝试使用 ng-init 指令,但这不起作用

            <div ng-repeat="user in displayUsers" class="text-black form-inline"> 
            <input type="text" value="{{user.nom}}" class="form-control" disabled>
            <input type="text" value="{{user.prenom}}" class="form-control" disabled>
            <input type="text" value="{{user.email}}" class="form-control" disabled>
            <span ng-init="response={{user.response}}">
                <input type="radio" class="radio-inline" name="" value="1" ng-model="response" disabled>En attente
                <input type="radio" class="radio-inline"name="" value="2" ng-model="response" disabled>Oui
                <input type="radio" class="radio-inline" name="" value="3" ng-model="response" disabled>Non        
            </span>
        </div>

【问题讨论】:

    标签: angularjs radio-button


    【解决方案1】:

    这不是 ngInit 的用途,也不是 ngInit 的必需品。 ngModel 正在使用中,它应该控制是否选中单选按钮。只需确保模型值始终具有适当的值。如果模型值不是一个简单的字符串,你可以使用 ngValue 来指定哪个模型值应该导致单选按钮被选中。

    <span>
        <input type="radio" class="radio-inline" name="" ng-value="1" ng-model="user.response" disabled>En attente
        <input type="radio" class="radio-inline"name="" ng-value="2" ng-model="user.response" disabled>Oui
        <input type="radio" class="radio-inline" name="" ng-value="3" ng-model="user.response" disabled>Non        
    </span>
    

    【讨论】:

    • 这是我尝试的第一件事,但没有奏效。我猜模型值类型可能是问题
    • 请注意,我使用了ng-value 而不仅仅是value 属性。如果值是整数,则无法使用value,因为它始终被视为字符串。
    • 从头开始。对于数字,value 应该仍然有效。您应该检查user.response 中的实际值。这可能不是您所期望的。
    • 虽然ng-value 仍然更安全,因为3 == '3'3 == '3.0''3' != '3.0'。隐式类型转换可能是个问题。
    • 谢谢,现在运行良好!但我有一个新问题。我的单选按钮不再禁用,我想更新我的数据库中的更改值。我试图在收音机上添加 ng-change 指令,但它只在第一次点击时起作用,其他项目被忽略。我应该使用 id 还是什么?
    猜你喜欢
    • 2022-11-11
    • 2015-06-27
    • 1970-01-01
    • 2018-08-21
    • 2015-05-26
    • 2015-05-07
    • 1970-01-01
    • 2013-09-06
    • 1970-01-01
    相关资源
    最近更新 更多