Question

我正在尝试制作模式，以便用户可以编辑他们的帖子。当＆＃34;编辑＆＃34;单击按钮，没有任何反应。它似乎没有功能，当我尝试调试它时，我的控制台中没有出现任何内容（即没有错误或任何内容）。我当前的bootstrap版本是3.3.7。请让我知道我可能出错的地方...... 我的HTML：

<!DOCTYPE html>
<html>
<head>
  <title>WebApp Welcome Page</title>
</head>
<body ng-controller="WelcomeCtrl">
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <a href="#/home" class="navbar-brand">WebApp</a>
      </div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#/welcome">Home</a></li>
        <li><a href="#/addPost">Add Post</a></li>
        <li><a href="#">Logout</a></li>
      </ul>
    </div>
  </nav>

  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h3>Welcome Home {{username}} !</h3>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row" ng-repeat="article in articles">
      <div class="col-md-12 well well-sm">
        <h4>{{article.title}}</h4>
        <p>{{article.post}}</p>
        <button type="submit" class="btn btn-sm btn-primary" data-target="#editModal" data-toggle="modal">Edit</button>
        <button type="submit" class="btn btn-sm btn-danger">Delete</button>
      </div>
    </div>
  </div>

  <div class="container">
    <div id="editModal" class="modal hide fade" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4>Edit Post Details</h4>
          </div>
          <div class="modal-body">
            <form role="form">
              <div class="form-group">
                <label for="title">Title</label>
                <input type="text" name="title" class="form-control"/>
              </div>
              <div class="form-group">
                <label for="post">Post</label>
                <textarea name="post" class="form-control"></textarea>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-sm primary">Update Post</button>
            <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Cancel</button>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>
</html>

我的.js：

'use strict';

angular.module('webApp.welcome', ['ngRoute', 'firebase'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/welcome', {
    templateUrl: 'welcome/welcome.html',
    controller: 'WelcomeCtrl'
  })
}])

.controller('WelcomeCtrl', ['$scope', 'CommonProp', '$firebaseArray', function($scope, CommonProp, $firebaseArray) {
  $scope.username = CommonProp.getUser();

  var ref = firebase.database().ref().child('Articles');
  $scope.articles = $firebaseArray(ref);
  console.log($scope.articles);
}])

Answer 1

w3school上的例子并没有在对话框div中包含hide类，只是＆＃34;模态淡化＆＃34;。

我还要更改＆＃34;提交＆＃34;的触发按钮类型。到＆＃34;按钮＆＃34;因为你没有提交表格。

Bootstrap版本3.3.7模式没有出现

1 个答案: