Question

我需要在div show / hide之间切换。我可以通过以下代码实现它

 <div class="fav-player" ng-repeat = "selectedPlayer in selectedPlayers">
            <div class="player-head">
                <div class="player-name" ng-click="showDetails = ! showDetails" id="name-{{selectedPlayer.id}}">{{selectedPlayer.firstName}})</div>

            </div>
             <div class="fav-player-score-detail" id="fav-{{selectedPlayer.id}}" ng-show="showDetails">
                Hi, I am {{selectedPlayer.firstName}} - shown now
            </div>
  </div>

点击div：玩家头显示 fav-player-score-detail 但是，挑战是隐藏除了显示的所有其他DIV。我不应该立刻看到所有的DIV扩展。只应扩大一个。请帮助！

Demo Here

提前致谢！

Answer 1

试试这个

var jimApp = angular.module("mainApp",  []);

jimApp.controller('mainCtrl', function($scope){
  $scope.selectedPlayers=[
    {firstName:'abc', id:1},
     {firstName:'pqr', id:2},
     {firstName:'xyz', id:3},
     {firstName:'ghi', id:4},
     {firstName:'lmn', id:5}
    ];
  
  $scope.newSelection = function(id){
    $scope.selected = id;
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="mainApp" ng-controller="mainCtrl">
  <div class="fav-player" ng-repeat = "selectedPlayer in selectedPlayers">
    <div class="player-head" >
      <div class="player-name"  id="name-{{selectedPlayer.id}}" ng-click="newSelection(selectedPlayer.id);">{{selectedPlayer.firstName}}</div>
    </div>
    <div class="fav-player-score-detail" id="fav-{{selectedPlayer.id}}" ng-if="selected == selectedPlayer.id">
      Hi, I am {{selectedPlayer.firstName}} - shown now
    </div>
  </div>
</div>

Answer 2

将选定的div保存在ng-click上并更新ng-show，以便仅在div为所选的$scope.toggleDetails = function(name){ if($scope.detailsShown === name){ $scope.detailsShown = null; } else { $scope.detailsShown = name; } } ... <div class="player-name" ng-click="toggleDetails(selectedPlayer.firstName)" > ... <div class="fav-player-score-detail" ng-show="selectedPlayer.firstName==detailsShown">时显示。

更新以维护切换功能以获取详细信息，我使用的是函数而不是内联表达式。

<script type="text/javascript" language="javascript">
    $(document).ready(function() {
        $("#JQGrid1").jqGrid({
            url: '@Url.Action("GetData", "InvoiceType")',
            editurl: '@Url.Action("EditData", "InvoiceType")',
            mtype: "GET",
            datatype: "json",
            page: 1,
            colModel: [
                { editable: true, editoptions: { readonly: "readonly" }, key: true, width: 60, label: "Id", name: "Id", hidden: false },
                { editable: true, width: 250, label:"Name", name: "Name", hidden: false },
                { editable: true, editoptions: { readonly: "readonly" }, width: 175, label: "Date Created", name: "DateCreated", align: 'right', hidden: false, formatter: "date", formatoptions: { srcformat: "m/d/Y h:i:s A", newformat: "m/d/Y h:i:s A" } },
                { editable: true, editoptions: { readonly: "readonly" }, width: 175, label: "Date Updated", name: "DateUpdated", align: 'right', hidden: false, formatter: "date", formatoptions: { srcformat: "m/d/Y h:i:s A", newformat: "m/d/Y h:i:s A" } },
                { editable: true, editoptions: { readonly: "readonly" }, width: 200, label: "Created By", name: "UpdatedBy", hidden: false },
                //{ editable: true, editoptions: { readonly: "readonly" }, width: 50, label: "Active", name: "Active", hidden: false },
                { editable: true, editoptions: { value: "1:0" }, edittype: "checkbox", width: 50, label: "Active", name: 'Active', index: 'Active', formatter: 'checkbox', align: 'center', stype: "select", searchoptions: { value: "1:Yes;0:No" } },
            ],
            height: "350",
            autowidth:true,
            shrinkToFit: false,
            caption: "Invoice Types",
            rowNum: 10,
            pager: "#JQGrid1_pager",
            rowattr: function (rd) {
                if (rd.Active === 'False') {
                    return { "class": "myAltRowClass" };
                }
            },
            loadComplete: function () {
                //alert("OK");
            },
            loadError: function(jqXHR, textStatus, errorThrown) {
                alert('HTTP status code: ' + jqXHR.status + "\n" +
                    'textStatus: ' + textStatus + "\n" +
                    'errorThrown: ' + errorThrown);
                alert('HTTP message body (jqXHR.responseText): ' + "\n" + jqXHR.responseText);
            },

        }).jqGrid('navGrid', '#JQGrid1_pager', { edit: true, add: true, del: true, search: false, view: true, refresh: true },
        {
            // edit options
            editCaption: "The Edit Dialog",
            recreateForm: true,
            checkOnUpdate: true,
            checkOnSubmit: true,
            closeAfterEdit: true,
            height: 'auto',
            width:'auto',
            errorTextFormat: function (response) {
                return '<span class="ui-icon ui-icon-alert" ' +
                             'style="float:left; margin-right:.3em;"></span>' +
                            response.responseText;
            },
            afterSubmit: function (response) {
                var myInfo = '<div class="ui-state-highlight ui-corner-all">' +
                             '<span class="ui-icon ui-icon-info" ' +
                                 'style="float: left; margin-right: .3em;"></span>' +
                             response.responseText +
                             '</div>',
                    $infoTr = $("#TblGrid_" + $.jgrid.jqID(this.id) + ">tbody>tr.tinfo"),
                    $infoTd = $infoTr.children("td.topinfo");
                $infoTd.html(myInfo);
                $infoTr.show();

                // display status message to 3 sec only
                setTimeout(function () {
                    $infoTr.slideUp("slow");
                }, 3000);

                return [true, "", ""]; // response should be interpreted as successful
            }

        },
        {
            //add options
            closeAfterAdd: true,
            recreateForm: true,
            height: 'auto',
            width: 'auto',
            errorTextFormat: function (data) {
                return 'Error: ' + data.responseText
            }

        },
        {
            // del options
            errorTextFormat: function (data) {
                return 'Error: ' + data.responseText
            }
        },
        {
            //search

        },
        {
            //view details form
            height: 'auto',
            width: '400',
        });
    });

</script>

Updated fiddle

Answer 3

＆＃13;

var app = angular.module('app',[]);
app.controller('myController',function($scope){
		$scope.selectedPlayers=[
    {firstName:'abc'},
     {firstName:'pqr'},
     {firstName:'xyz'},
     {firstName:'ghi'},
     {firstName:'lmn'}
    ];
    
    $scope.showDetailIndex = -1;
    $scope.updateShowIndex = function(index){
      $scope.showDetailIndex = index;
    }


});

＆＃13;

.player-name{
	width:200px;
	height:20px;
	border:2px solid tomato;
}
.fav-player-score-detail{color:blue;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="app">
  <body ng-controller="myController">
     <div class="fav-player" ng-repeat = "selectedPlayer in selectedPlayers">
				<div class="player-head">
					<div class="player-name" ng-click="updateShowIndex($index);">
					  {{selectedPlayer.firstName}}
					 </div>
					
				</div>
				 <div class="fav-player-score-detail"  ng-show="showDetailIndex == $index">
					Hi, I am {{selectedPlayer.firstName}} - shown now
				</div>
      </div>
  </body>
</html>

＆＃13;

Updated jsfiddle

Angular JS - 显示1个div并隐藏所有其他人

3 个答案: