Html ng根据元素ID单击_Html_Angularjs

Html ng根据元素ID单击

html angularjs

Html ng根据元素ID单击,html,angularjs,Html,Angularjs,因此，我有一个ng repeat遍历一个数组，该数组包含构成API的元素。通过ng repeat，我打印出与API中不同对象中存在的属性数相同的div数，其中包含一些属性的名称。现在，我想要的下一步是，当我单击任何属性名称div时，会打开另一个屏幕，其中包含属性的详细信息（然后从API获取详细信息，我可以这样做）。我不能做的是如何使用ng click，它会进入详细信息屏幕，但会根据单击的属性进行操作。我知道我需要在ng单击中传递属性ID，并将其引导到另一个屏幕。不知道怎么做。我对Angularj

因此，我有一个

ng repeat

遍历一个数组，该数组包含构成API的元素。通过

ng repeat

，我打印出与API中不同对象中存在的属性数相同的div数，其中包含一些属性的名称。现在，我想要的下一步是，当我单击任何属性名称div时，会打开另一个屏幕，其中包含属性的详细信息（然后从API获取详细信息，我可以这样做）。我不能做的是如何使用

ng click

，它会进入详细信息屏幕，但会根据单击的属性进行操作。我知道我需要在

ng单击中传递属性ID，并将其引导到另一个屏幕。不知道怎么做。我对Angularjs有点陌生，有人能帮忙吗

{{prop.name}

现在，当为不同的属性创建div时，当我单击其中一个属性时，会出现一个新屏幕，然后我会在那里显示我想要为该属性显示的内容
PS-对于属性ID:prop.ID
嘿，很简单，您可以在ng中调用@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>

在该函数内部
使用可以直接编写函数调用
<div ng-repeat="prop in propertyDetails" class="propertyCard"
 ng-click="propDetails(prop.id)">
<p class="propSummaryName">{{ prop.name }}</p>


如果要在另一个屏幕上显示属性详细信息，则可以使用
模式或路由
请帮助我理解这一点，因此，基本上，当单击时，您会看到一个弹出窗口，并在那里显示属性名称，是吗？否。但我希望在单击时出现一个新屏幕，以显示数据，而不是弹出窗口。不是弹出窗口。可以吗？这个代码会在同一个屏幕上打开一个弹出窗口，对吗？但我想重定向到一个新的单独屏幕，window.location=”http://www.my-domain.com/login?id=“+prop.id我希望这能奏效，但我有很多数据要显示。基本上，用户可以看到他拥有的属性，然后看到属性的全部细节（数据太多），一个新的屏幕出现了。在on-click函数中，我使用了$location.path（'/my.html'），但它不起作用。您可以按虚拟名称导航，而不是按html名称导航。您在项目中添加了路由吗？是的，我添加了路由，而您可能添加了如下内容：when（'/my'，{template:'my.html'，controller:'myController'，}）；然后使用$location.path（'/my'）到naigate。您必须将url中的数据作为参数传递。请检查确切的语法。然后在渲染控制器中获取数据。
<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 };