AngularJS - ng-repeat 生成的单选按钮选择后模型不更新问题解决方案

阅读时长 3 分钟读完

在使用AngularJS时,如果使用ng-repeat指令生成了一组单选按钮,并且发现在选择其中一个单选按钮时模型没有被更新的情况下,可以采取以下解决方案。

问题分析

当使用ng-repeat指令生成一组单选按钮时,每个按钮都有一个唯一的值作为其ng-model属性的值,这些值用于与模型关联。但是,当我们选择其中一个单选按钮时,模型并没有被更新。

造成这种情况的原因是,当我们使用ng-repeat指令生成单选按钮时,实际上创建了多个作用域,每个作用域都有自己的ng-model属性。当我们选择其中一个单选按钮时,只有当前作用域中的ng-model属性会被更新,而不是整个应用程序中的ng-model属性。

解决方案

要解决这个问题,需要使用$parent作用域来确保ng-model属性更新到父作用域中。

例如,在下面的示例代码中,我们使用ng-repeat指令创建一组单选按钮:

在这个示例中,我们使用$parent.selected来确保ng-model属性更新到父作用域中。这样,当我们选择其中一个单选按钮时,ng-model属性会更新到整个应用程序中,而不仅仅是当前作用域中。

示例代码

为了更好地理解上述解决方案,以下是完整的示例代码:

-- -------------------- ---- -------
--------- -----
----- ---------------
------
  ---------------- ---------------
  ------- ------------------------------------------------------------------------------------
-------
------

---- -----------------------
  ---- --------------- -- -------
    ------ ------------ --------------------------- -----------------------
    --------------
  ------
  ----
  -------- ------ ------------
------

--------
--- --- - ----------------------- ----

------------------------ ---------------- -
  ------------ - -
    ------- ------- --- ------ -----------
    ------- ------- --- ------ -----------
    ------- ------- --- ------ ----------
  --

  --------------- - ---
---
---------

-------
-------

在这个示例中,我们创建了一个AngularJS应用程序,其中包含一个控制器和一个使用ng-repeat指令生成的单选按钮组。当我们选择其中一个单选按钮时,ng-model属性将被更新到整个应用程序中,并且所选值将显示在页面上。

结论

通过使用$parent作用域,我们可以确保ng-repeat指令生成的单选按钮选择后模型能够正确更新。在实际开发中,我们应该根据需要使用这种技术来确保模型能够正确更新并与应用程序中的其他部分保持同步。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/606f1b692d2a29a3c120331b

纠错
反馈