On one page I'm doing something like this:
<tr ng-repeat="innerCommunicationTopic in data.InnerCommunicationTopics">
<td>{{innerCommunicationTopic.Topic | Empty}}</td>
<td>{{innerCommunicationTopic.WhenCreatedStr | Empty}}</td>
<td>{{innerCommunicationTopic.WhenLastChangeStr | Empty}}</td>
<td><button class="btn btn-sm btn-default margins" ng-click="showMsgs(innerCommunicationTopic.id)">Pokaż</button></td>
</tr>
Each InnerCommunicationTopic does have a List of InnerCommunicationMessage(s).
The button shows a modal where I want to present all InnerCommunicationMessage(s) in InnerCommunicationTopic. I just don't have a clue how to do this.
I call the modal here:
$scope.showMsgs = function (topicId) {
var modalInstance = $modal.open({
animation: true,
templateUrl: '/WWW/partials/createMsgModal.html'
})
};
I've tried something like this in the modal:
<tr ng-repeat="innerCommunicationMessage in $parent.data.InnerCommunicationTopics[id].Messages">
<td>{{innerCommunicationMessage.WhoCreated | Empty}}</td>
<td>{{innerCommunicationMessage.WhenCreatedStr | Empty}}</td>
<td>{{innerCommunicationMessage.Message | Empty}}</td>
</tr>
I know it's wrong, the id simply cannot work, but I don't really have an idea and I've already searched a lot for this. Thank you in advance!
Bind that specific id with scope and Pass your scope to modal like this:
$scope.showMsgs = function (topicId) {
$scope.topicId = topicId;
var modalInstance = $modal.open({
animation: true,
templateUrl: '/WWW/partials/createMsgModal.html',
scope: $scope
})
};
Then in modal you can use topicId
<tr ng-repeat="innerCommunicationMessage in data.InnerCommunicationTopics[topicId].Messages">
<td>{{innerCommunicationMessage.WhoCreated | Empty}}</td>
<td>{{innerCommunicationMessage.WhenCreatedStr | Empty}}</td>
<td>{{innerCommunicationMessage.Message | Empty}}</td>
</tr>
This way you do not have to use $parent.data
, only data
will work, because this modal has scope of parent.