Question

所以我有一个ng-repeat遍历包含API元素的数组。通过ng-repeat，我打印出与某些对象中API中存在的属性数量相同数目的div，其中包含某些属性的名称。现在我想要的下一步是，当我单击任何属性Name div时，将打开另一个屏幕，其中包含该属性的详细信息（然后从我可以执行的API中获取详细信息）。我无法执行的操作是如何使用ng-click，它会转到详细信息屏幕，而是根据所单击的属性。我知道我需要以某种方式在ng-click中传递属性ID并将其引导到另一个屏幕。不知道如何。 Kinda是Angularjs的新手，所以有人可以帮忙吗？

<div ng-repeat="prop in propertyDetails" class="propertyCard"
     ng-click="Something here which I cant figure out ">
    <p class="propSummaryName">{{ prop.name }}</p>
<div>

现在，当我为不同的属性创建div时，当我单击其中一个时，会出现一个新屏幕，然后在此处显示要为该属性显示的内容。

用于属性ID的PS-：prop.id

Answer 1

使用可以直接编写函数调用。

<div ng-repeat="prop in propertyDetails" class="propertyCard"
 ng-click="propDetails(prop.id)">
<p class="propSummaryName">{{ prop.name }}</p>

$scope.showDetails(propId) {
// do want ever you want to };

如果要在其他屏幕上显示属性详细信息，则可以使用模式或路由。

Answer 2

嘿，很简单您可以在ng Click中调用@scope函数，然后在该函数内部调用重置服务，然后打开弹出窗口

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body ng-app="myApp" ng-controller="test">
<div ng-init="loadData()">
<div ng-repeat="prop in propertyDetails" class="propertyCard"
     ng-click="openMyPopUp(prop)">
    <p class="propSummaryName">{{ prop.name }}</p>
<div>



<div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">

        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <!-- Modal body -->
        <div class="modal-body">
          Name : {{popupData.name}}
           Id : {{popupData.id}}
        </div>

        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        </div>

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



</body>
</html>

<script type="text/javascript">

var app = angular.module('myApp', []);
app.controller('test', function($scope, $http) {

    var popup = angular.element("#myModal");
//for hide model
popup.modal('hide');

  var url = 'your-url.com/rest/api'
    $scope.loadData = function(){
        $http.get(url).then(function(res){
            $scope.propertyDetails = res.data;
        });
    }

    $scope.openMyPopUp= function(data) {
        $http.get(url + '?id=' + data.id).then(function(res){
            $scope.popupData = res.data;
        });
        //for show model
        popup.modal('show');
    }


});
</script>

如果您需要重定向到其他页面，则可以这样做

 var url = "http://" + $window.location.host + "/Account/Login";
        $log.log(url);
        $window.location.href = url;

此功能内

ng根据元素ID单击

2 个答案: