Angular Radio默认选择和NG-如果按钮不起作用

我在图像内有ng-repeat和图标两个无线电按钮，但是当页面加载时，基于ng-if检查的默认值时应必须显示ng-if当前ng-如果不工作。<<<<<<。/p>

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>

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

尝试使用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>

相关内容

最新更新

热门标签：