Angular Radio 默认选择和 ng-if 按钮不起作用

Posted

技术标签:

【中文标题】Angular Radio 默认选择和 ng-if 按钮不起作用【英文标题】：Angular Radio default select and ng-if button not working 【发布时间】：2018-07-30 10:48:46 【问题描述】：

我有 ng-repeat 内部图像和图标两个单选按钮，但是当页面加载时，基于 ng-if 的默认检查应该必须显示当前 ng-if 不工作。

HTML

  <div class="carousel-div umb-grid p10 ng-scope" ng-repeat="listitem in QuickLinkList">
       <!-- <a href class="icon icon-delete red" ng-click="removeLink(listitem)" title="Remove Link"></a>-->
        <b class="ng-binding"> Link 2</b>
        <div class="p10 control-group umb-control-group">

            <div class="control-group umb-control-group">
                <div class="umb-el-wrap">
                    <span>
                        <label>
                            Choose an 
                            <input type="radio"  value="IMAGE" ng-model="listitem.btnMedia" class="">&nbsp;IMAGE&nbsp;&nbsp;
                            <input type="radio" value="ICON" ng-model="listitem.btnMedia" class="">&nbsp;ICON&nbsp;&nbsp;
                        </label>


                    </span>
                </div>
            </div>




               <div ng-if="listitem.btnMedia == 'ICON'">
                    ICONSSSSSSSSSSSSSSSS
                </div>

                <div ng-else="listitem.btnMedia=='IMAGE'" >
                   IMAGES
                </div>



        </div>


        <br>
        <br>

    </div>

JS

var app = angular.module('plunker', []);

app.controller('MainCtrl', function ($scope) 
  $scope.name = 'World';

  $scope.QuickLinkList = [
    title: "",
    img: "/media/1003/tfscicd2.png",
    desc: "",
    id: "id1519004043718",
    btnText: "Action Button",
    btnMedia: "IMAGE"
  ,
    
      title: "",
      img: "/media/1008/023cbe454ccec14b728b0664691178d6.jpg",
      desc: "",
      id: "id1519004057819",
      btnText: "Action Button",
      btnMedia: "IMAGE"
    ,
    
      title: "",
      img: "",
      desc: "",
      id: "id1519023555243",
      btnText: "Action Button",
      btnMedia: "ICON"
    ]

);

https://plnkr.co/edit/bVwrVim4X5mTYj9bLh58?p=preview

【问题讨论】：

【参考方案1】：

尝试使用 ng-show 代替 ng-if，它会正常工作。这是plunker的链接。

https://plnkr.co/edit/KaNzK5UW03KINcOVa8er?p=preview

<!DOCTYPE html>
<html ng-app="plunker">

<head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>
        document.write('<base href="' + document.location + '" />');
    </script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.0.x" src="https://code.angularjs.org/1.0.8/angular.js" data-semver="1.0.8"></script>
    <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
    <p>Hello name!</p>

    <div class="carousel-div umb-grid p10 ng-scope" ng-repeat="listitem in QuickLinkList">
        <!-- <a href class="icon icon-delete red" ng-click="removeLink(listitem)" title="Remove Link"></a>-->
        <b class="ng-binding"> Link 2</b>
        <div class="p10 control-group umb-control-group">

            <div class="control-group umb-control-group">
                <div class="umb-el-wrap">
                    <span>
                        <label>
                            Choose an 
                            <input type="radio"  value="IMAGE" ng-model="listitem.btnMedia" class="">&nbsp;IMAGE&nbsp;&nbsp;
                            <input type="radio" value="ICON" ng-model="listitem.btnMedia" class="">&nbsp;ICON&nbsp;&nbsp;
                        </label>
                        listitem.btnMedia
                    </span>
                </div>
            </div>
            <div ng-show="listitem.btnMedia == 'ICON'">
                ICONSSSSSSSSSSSSSSSS
            </div>
            <div ng-show="listitem.btnMedia == 'IMAGE'">
                IMAGES
            </div>
        </div>
        <br>
        <br>
    </div>
</body>

</html>

【讨论】：

以上是关于Angular Radio 默认选择和 ng-if 按钮不起作用的主要内容，如果未能解决你的问题，请参考以下文章

Angular js 之一些简单的js操作

Angular ng-if不重新编译指令

Angular ng-if 没有按预期响应

Angular零星知识点2

Angular面试题

javascript Angular ng-show，ng-hide，ng-if，ng-switch