Question

我有一些<div>标签，我正在为它们分配一个函数，允许我通过更改它的css propriety来显示一种带有<div>元素详细信息的模态'显示'到'阻止'而不是'无'。由于某种原因，当我点击<div>元素时，模态不会显示。但是当我为一个按钮分配相同的功能时，它会。

$scope.CountryDetailStyle = {
  'display': 'none'
};

$scope.CountryDetail = function(idCount, nameCount, descCount) {
  $scope.detailId = idCount;
  $scope.detailName = nameCount;
  $scope.detailDesc = descCount;
  $scope.CountryDetailStyle = {
    'display': 'block'
  };
  // alert('idCount : '+idCount+' nameCount : '+nameCount+' descCount : '+descCount);
}

<div id="pageContent" ng-controller="myAdminController">
  <div class="countries" ng-repeat="country in countries" title="{{country.descCount}}" ng-click="CountryDetail(country.idCount, country.nameCount,
        country.descCount)">
    <label> {{country.nameCount}} </label><br/>
    <img ng-src="uploads/{{country.image}}" alt="Image Not Found"><br>
  </div>
</div>


<div>
  <button ng-click="CountryDetail(country.idCount, country.nameCount,
        country.descCount)" style="display:block; float:right; clear:both;">Display Country Detail</button>
</div>


<div class="countryDetails" ng-style=CountryDetailStyle>
  <!--this is the modal i want to display -->
  <div class="content">
    <div class="boxHeader">
      <label>{{detailName}}</label>
    </div>
    <div class="boxContent">
      <form>
        <p>{{detailDesc}}</p>
        <a href="#" class="btn" style="text-decoration:none;">Read More</a>
      </form>
    </div>
  </div>
</div>

有人可以告诉我这是什么问题吗？感谢。

Answer 1

你不应该根据某些显示来显示/隐藏元素：无条件。这就是ng-show（和ng-if）的用途。使用$ scope.isModalVisible等$ scope变量，并将其设置为true或false。

然后你可以在你的元素上使用ng-show =“isModalVisible”

Answer 2

＆＃13;

ObjectMapper mapper = new ObjectMapper();
JsonNode jnNode= mapper.readTree(jsonString);
Sting accName=jnNode.get("orderDetails").get("account_name").asText();
}

＆＃13;

var app=angular.module("myApp",[]);
app.controller("myAdminController",["$scope",function($scope){
$scope.CountryDetailStyle = {'display': 'none'};
$scope.countries=[
{
idCount:"1",
nameCount:1,
descCount:1

},{
idCount:"2",
nameCount:2,
descCount:2

},{
idCount:"3",
nameCount:3,
descCount:3

},{
idCount:"4",
nameCount:4,
descCount:4

}
]
                                
$scope.CountryDetail = function(idCount, nameCount, descCount){
    $scope.detailId = idCount;
    $scope.detailName = nameCount;
    $scope.detailDesc = descCount;
    $scope.CountryDetailStyle = {'display': 'block'};

}
}]);

＆＃13;

Answer 3

所以我找到了一个解决方案，仍然不知道它为什么会起作用但是确实如此。我将带有id =“pageContent”的div的</div>移动到正文结束标记之前。这解决了一切。谢谢你们的帮助。

Angularjs函数不能与<div>元素一起使用？

3 个答案: