ng-click в соответствии с ID элемента - PullRequest
Новая
       3

ng-click в соответствии с ID элемента

0 голосов
/ 28 июня 2019

Итак, у меня есть ng-repeat, перебирающий массив, содержащий элементы, формирующие API. Через ng-repeat я распечатываю то же число div (ов), содержащее имена некоторых свойств, что и количество свойств, присутствующих в API в различных объектах. Теперь следующий шаг, который мне нужен, заключается в том, что, когда я нажимаю на любое имя свойства div, открывается другой экран, в котором содержатся сведения о свойстве (подробности извлекаются из API, который я могу сделать). То, что я не могу сделать, это как использовать ng-click, чтобы перейти к экрану сведений, но в соответствии со свойством, по которому щелкают. Я знаю, что каким-то образом мне нужно передать идентификатор свойства в ng-click и перевести его на другой экран. Не могу понять, как. В некотором роде новичок в 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 создаются для различных свойств, когда я нажимаю на одно из них, появляется новый экран, и затем я показываю там, что я хочу показать для свойства.

PS- для ID объекта: prop.id

Ответы [ 2 ]

2 голосов
/ 28 июня 2019

Использование может напрямую записывать вызов функции. 

<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 };
  • Если вы хотите отобразить подробности свойства на другом экране, вы можете использовать модальное или маршрутизация.
1 голос
/ 28 июня 2019

эй, это просто Вы можете вызвать функцию @scope в ng Click, а внутри функции вызвать службу сброса, а затем открыть всплывающее окно 

<!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;

внутри этой функции

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...