zoukankan      html  css  js  c++  java
  • AngularJS ng-repeat下使用ng-model 转

     

    举例:

    1
    2
    3
    
    blue:<input type="radio" value="1" ng-model="selectValue"/>
    red:<input type="radio" value="2" ng-model="selectValue"/>
    yellow: <input type="radio" value="3" ng-model="selectValue"/>

    以上代码实现一个单选框功能,当你选中其中的一个单选框,可以从$scope.selectValue中得到你选中的的选项的value。
    同时改变$scope.selectValue的值,也可以让界面上选中相应的单选框。

    假设单选框的个数是不固定的,用ng-repeat来展现。

    1
    2
    3
    4
    5
    6
    7
    
    <table>
    <tr ng-repeat="row in collections">
    <td>
    {{row.name}}: <input type="radio" value="{{row.value}}" ng-model="selectValue"/>
    </td>
    </tr>
    <table>

    当你书写了上述代码后。你会发现点击其中的对话框,$scope.selectValue中并没有保存你选中的对应单选框的值。

    这是因为处在ng-repeat之间的代码,对全局的$scope里变量的内容是不可见的,像{{row.name}}里的row,并不是全局$scope里的成员。
    而是为ng-repeat创建的子scope里面的。所以要引用全局$scope里的成员,你可以使用$parent 来引用全局的$scope

    1
    2
    3
    4
    5
    6
    7
    
    <table>
    <tr ng-repeat="row in collections">
    <td>
    {{row.name}}: <input type="radio" value="{{row.value}}" ng-model="$parent.selectValue"/>
    </td>
    </tr>
    <table>
  • 相关阅读:
    coalesce搭配nullif使用
    阿里云服务器数据备份到本地
    MSSQL 删除数据库表数据
    MSSQL 删除重复数据
    MSSQL 字段分组拼接
    MySql 字段分组拼接
    获取格式字符串第idx个值及实例
    针对字符串长度超过8000的处理
    【21】责任链模式
    【20】策略者模式(Strategy Pattern)
  • 原文地址:https://www.cnblogs.com/zifeiyu/p/3765864.html
Copyright © 2011-2022 走看看