Question

我有ng-repeat中包含图像，内容和标题的故事列表。当我点击特定故事时，我需要打开引导模型并显示值。我是通过调用函数showStories()来做到的;但我无法做到。我的全局声明为

，因此我获得空值

            $scope.selectedStoryPreview =  "";
            $scope.selectedStoryContent = "";
            $scope.selectedStoryTitle  = "";

Html：

<div class="image" ng-repeat="item in filteredStories track by $index">
    <img ng-src="{{item.images}}" style="cursor: pointer;" ng-click="showStories(item)" data-toggle="modal" data-target="#storyPreview">
    <button><span>{{item.title}}</span>
    </button>
</div>

JS：

$scope.showStories = function(item) {

            $scope.selectedStoryPreview =  item.images;
            $scope.selectedStoryContent = item.content;
            $scope.selectedStoryTitle  = item.title;

        }

模态：

<div class="modal fade" id="storyPreview" role="dialog"  data-keyboard="false" data-backdrop="static" style="padding-top: 8em;">

        <div class="modal-dialog">
  <div class="modal-content" style="text-align: center;">
    <div class="modal-header imagemodalhead">
        <h4>{{selectedStoryTitle}}</h4>
        <a class="edit" ng-click="openmanageprofile()"><img src="css/images/edit.png">
        </a>
    </div>
    <div class="modal-body" style="background: #eee;">


        <div class="row">

            <img class="file-imageStory" ng-src="{{selectedStoryPreview}}" />

        </div>
        <br>
        <div class="row">
            <div class=" col-sm-12 storyPrv">
                <span class="styletheStory">{{selectedStoryContent}}</span>
            </div>
        </div>

        <div class="modal-footer imagefooter">
            <button type="button" class="button share" ng-click="closePreview()" style="background-color: #7B7D7D; color: black;">close</button>
        </div>

    </div>

Answer 1

$scope.model是undefined。将其设置为$scope.model = {}这样您可以在编译时动态地向其添加属性。
此外，您可以使用data-toggle="modal" data-target="#viewdetails"作为操作事件指向正确模态的。
此外，无需将单个属性作为参数传递给方法showStories(item)，你可以发出完整的对象和获得它的属性。

样本：

点击图片打开模态。

＆＃13;

function MyCtrl($scope) {

  $scope.filteredStories = [{
    id: 1,
    images: 'sample1.png',
    title: "sample1",
    content: "content here..."
  }, {
    id: 2,
    images: 'sample2.png',
    title: "sample2",
    content: "content here..."
  }, {
    id: 3,
    images: 'sample3.png',
    title: "sample3",
    content: "content here..."
  }, {
    id: 4,
    images: 'sample4.png',
    title: "sample4",
    content: "content here..."
  }]

  $scope.showStories = function(item) {
    $scope.selectedStoryPreview = item.images;
    $scope.selectedStoryContent = item.content;
    $scope.selectedStoryTitle = item.title;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<body ng-app ng-controller="MyCtrl">
  <div class="image" ng-repeat="item in filteredStories track by $index">
    <img ng-src="{{item.images}}" style="cursor: pointer;" ng-click="showStories(item)" data-toggle="modal" data-target="#storypreview">
    <button><span>{{item.title}}</span>
    </button>
  </div>
  <div class="modal fade" id="storypreview" role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content" style="text-align: center;">
        <div class="modal-header imagemodalhead">
          <h4>{{selectedStoryTitle}}</h4>
          <a class="edit" ng-click="openmanageprofile()"><img src="css/images/edit.png">
          </a>
        </div>
        <div class="modal-body" style="background: #eee;">
          <div class="row">
            <img class="file-imageStory" ng-src="{{selectedStoryPreview}}" />
          </div>
          <br>
          <div class="row">
            <div class=" col-sm-12 storyPrv">
              <span class="styletheStory">{{selectedStoryContent}}</span>
            </div>
          </div>
          <div class="modal-footer imagefooter">
            <button type="button" class="button share" ng-click="closePreview()" style="background-color: #7B7D7D; color: black;" data-dismiss="modal">close</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

＆＃13;

Answer 2

如果modal控制器不同。然后使用resolve方法发送值。如果控制器是相同的。然后我认为它应该显示值。

在这里提供id模态：

<div class="modal-content" id="storyPreview" style="text-align: center;">

从ng-repeat显示模态中的值

2 个答案: