Question

我有重复内部图像和图标两个单选按钮，但当页面加载默认检查时，基于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

Answer 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按钮不起作用

1 个答案: