angularJS从模态发送数据

时间：2016-02-12 11:04:09

标签： javascript angularjs json

我正在使用angularJS处理某个项目并且我遇到了这个问题。我无法将数据从模态发送到我的作用域，因为我的数据未定义。

所以如果有人可以帮助我，我会很感激。 如果我的英语有点生锈，我很抱歉。

这是我现在拥有的。

的index.html 

StyleCop.Analyzers

接下来是application.js 

<!DOCTYPE html>
<html>
<head>
    <title>Application</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">

    <!--<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">-->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <script type="text/javascript" src="Scripts/jQuery.js"></script>

    <!--<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>-->

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous">
    </script>


    <!--<script type="text/javascript" src="Scripts/angular.min.js"></script>-->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>

</head>


<body ng-app="myApp" ng-controller="siteCtrl">  
                    <!-- dodaj ng-controller="siteCtrl" -->
    <input type="button"  class="goToTop" value="Scroll Top" />


            <form class="navbar-form justify" role="search" ng-hide="hideSearch">
                <div class="input-group">
                    <input type="text" class="form-control" ng-model="searchString" placeholder="Enter your search terms" />
                </div>
            </form>


    <div class="container">
        <div class="btnDiv">
            <input id="btnSites" class="btn btn-primary btn-lg" type="button" name="addSite" value="Add Website" ng-click="toggleSites()">
            <input class="btn btn-primary btn-lg" type="button" name="addGroup" value="Add Group" ng-click="toggleGroups()">
        </div>

        <div class="sites-info" >
                <button id="btnSites" class="btn btn-info btn-lg"  ng-model="sites" ng-click="groupedWebsites()"> Websites 
                    <span class="badge">{{ ::promise.sites.length }}</span>
                </button>
                <button class="btn btn-info btn-lg" ng-model="groups" ng-click="showGroups()"> Groups
                    <span class="badge">{{ ::promise.groups.length }}</span>
                </button>
                <button class="btn btn-info btn-lg" ng-model="ungrouped"> Ungrouped Websites 
                    <span class="badge">{{ ungrouped}}</span>
                </button>
        </div>
    </div>

    <!--  Placeholder for view-->
    <!--<div ng-view="">-->

    <modal title="Add Website" visible="showModal">
        <form role="form">
            <div class="form-group">
                <label for="name">Site Name</label>
                <input type="text" class="form-control" id="name" name="name" placeholder="Site name"
                data-ng-model="name">
            </div>
            <div class="form-group">
                <label for="url">Site URL</label>
                <input type="text" class="form-control" id="url" name="url" placeholder="Site URL"
                data-ng-model="url">
            </div>
            <div class="form-group">
                <label for="color">Site color</label>
                <select name="color" class="form-control" id="color" data-ng-model="color">
                    <option selected >Choose color</option>
                    <option>Green</option>
                    <option>Red</option>
                    <option>Blue</option>
                    <option>Yellow</option>
                    <option>Orange</option>
                </select>
            </div>
            <div id="sites" class="form-inline">
                <label for="group">Choose group</label>
                <div ng-repeat="g in promise.groups">
                    <input type="checkbox" data-ng-model="g.Checked" >
                    <span style="color:{{g.color}};">{{ g.name }}</span>
                </div>
            </div>
            <button type="submit" class="btn btn-default" ng-click="addSite()">Add site</button>
        </form>
    </modal>



    <modal title="Add Groups" visible="showModal2">
        <form role="form">
            <div class="form-group">
                <label for="url">Group name</label>
                <input type="text" class="form-control" id="url" name="group_name" placeholder="Group name">
            </div>
            <div class="form-group">
                <label for="color">Group color</label>
                <select name="color" class="form-control" id="group_color" placeholder="Choose color">
                    <option>Choose color</option>
                    <option>Green</option>
                    <option>Red</option>
                    <option>Blue</option>
                    <option>Brown</option>
                    <option>Orange</option>
                </select>
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
        </form>
    </modal>

    <modal title="Edit Site" visible="showModal3">
        <form role="form">
            <div class="form-group">
                <label for="url">Site</label>
                <input type="text" class="form-control" id="url" name="site_url" placeholder="Site URL">
            </div>
            <div class="form-group">
                <label for="color">Site color</label>
                <select name="color" class="form-control" id="site_color" placeholder="Choose color">
                    <option>Choose color</option>
                    <option>Green</option>
                    <option>Red</option>
                    <option>Blue</option>
                    <option>Yellow</option>
                    <option>Orange</option>
                </select>
            </div>
            <div class="form-inline">
                <label for="group">Choose group</label>
                <div ng-repeat="g in promise.groups">
                    <input type="checkbox" ng-model="g.Checked" >
                    <span style="color:{{g.color}};">{{ g.name }}</span>
                </div>
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
        </form>
    </modal>



    <div class="container2">
        <table  id="allSites" class="table table-hover" ng-hide="hideTable1">
          <tr>
            <th>Site URL</th>
            <th>Group</th>
            <th>Edit</th>
          </tr>

          <tr ng-repeat="site in promise.sites | searchFor:searchString"  >
            <td>
                <a href="http://{{site.url}}" style="color:{{site.color}}; text-decoration:none">{{ ::site.siteName }} </a>

            <td>
            <div class = "btn-group">

                <button type = "button" class = "btn btn-primary"> Groups 
                <span class="badge">{{ ::site.group.length }}</span>
                </button>
                <button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown">
                        <span class = "caret"></span>
                        <span class = "sr-only">Toggle Dropdown</span>
                </button>

                <ul class = "dropdown-menu" role = "menu" >
                    <li ng-repeat="g in site.group"><span>{{::g}}</span><hr></li>
                </ul>

            </div>
            <td>
                <button class="btn btn-primary" ng-click="toggleEditSites()">Edit</button>
            </td>
            <td>
                    <img src="images/glyphicons-208-remove.png" ng-click="deleteSites($index)"/>
            </td>

          </tr>
        </table> 

        <div class="close-table">
            <button class="btn btn-primary btn-lg" ng-hide="hideButton1" ng-click="closeSites()">
            Close &times;
            </button>
        </div>
    </div>









    <div class="container2">
        <table class="table table-hover" ng-hide="hideTable">
          <tr>
            <th>Group name</th>
            <th>Sites</th>
            <th>Edit</th>
          </tr>

          <tr ng-repeat="groups in promise.groups">
            <td style="color:{{groups.color}};">{{ ::groups.name }}</td>
            <td>
                <div class = "btn-group">

                    <button type = "button" class = "btn btn-primary"> Sites 
                        <span class="badge">{{ ::groups.sites.length }}</span>
                    </button>
                    <button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown">
                        <span class = "caret"></span>
                        <span class = "sr-only">Toggle Dropdown</span>
                    </button>

                    <ul class = "dropdown-menu" role = "menu" >
                        <li ng-repeat="s in groups.sites"><span>{{::s}}</span><hr></li>
                    </ul>

                </div>
            <td>
                <button class="btn btn-primary" ng-click="toggleEditGroups()">Edit</button>
            </td>
            <td>
                    <img src="images/glyphicons-208-remove.png" ng-click="deleteGroup($index)"/>
            </td>
          </tr>
        </table> 

        <div class="close-table">
            <button class="btn btn-primary btn-lg" ng-hide="hideButton" ng-click="closeGroups()">
            Close &times;
            </button>
        </div>
    </div>









<script type="text/javascript" src="Scripts/app/application.js"></script>
<script type="text/javascript" src="Scripts/controllers/siteCtrl.js"></script>
<script type="text/javascript" src="Scripts//animation/animation.js"></script>
<script type="text/javascript" src="Scripts/filters/searchFilter.js"></script>
<script type="text/javascript" src="Scripts/modals/modal.js"></script>
</body>
</html>

Contrlollers

siteCtrl.js 

var app= angular.module("myApp",[]);

JSON很庞大，因为我有2000个网站和50个组。所以我只会发布几个objcets

data.json 

app.controller('siteCtrl', function($scope, $http){

    var promise= {};

    $http.get('JSON/data.json').then(function(res) {
        $scope.promise = res.data;
    console.log($scope.promise.sites);

    }, function() { promise = 'error'; });


    $scope.hideSearch=true;
    $scope.hideTable1=true;
    $scope.hideButton1=true;
    $scope.hideTable=true;
    $scope.hideButton=true;
    $scope.showModal = false;
    $scope.showModal2 = false;


    $scope.groupedWebsites= function(){
        $scope.hideTable=true;
        $scope.hideButton=true;
        $scope.hideTable1=false;
        $scope.hideButton1=false;
        $scope.hideSearch=false;
    };
    $scope.closeSites=function(){
        $scope.hideTable1=true;
        $scope.hideButton1=true;
        $scope.hideSearch=true;
        $scope.searchString="";
    }
    $scope.showGroups= function(){
        $scope.hideTable1=true;
        $scope.hideButton1=true;
        $scope.hideTable=false;
        $scope.hideButton=false;
        $scope.hideSearch=true;
    };
    $scope.closeGroups=function(){
        $scope.hideTable=true;
        $scope.hideButton=true;
        $scope.searchString="";
    }
    $scope.toggleSites = function(){
        $scope.showModal = !$scope.showModal;
    };
    $scope.toggleGroups = function(){
        $scope.showModal2 = !$scope.showModal2;
    };
    $scope.toggleEditSites=function(){
        $scope.showModal3 = !$scope.showModal3;
    }

    $scope.deleteSites = function (index) {
      //var ID;
      //ID=index.id;
      //if(ID==1){
        $scope.promise.sites.splice(index, 1);
      //}
      //$scope.promise.sites.splice(ID-2, 1);

      //console.log($scope.promise.sites.splice(ID-2, 1));
      //console.log(ID);
      /*console.log($scope.promise.sites);
      console.log($scope.promise.sites.splice(index, 1));*/

    }
    $scope.deleteGroup = function (index) {
      //var ID;
      //ID=index.id;
      //if(ID==1){
        $scope.promise.groups.splice(index, 1);
      //}
      //$scope.promise.sites.splice(ID-2, 1);

      //console.log($scope.promise.sites.splice(ID-2, 1));
      //console.log(ID);
      /*console.log($scope.promise.sites);
      console.log($scope.promise.sites.splice(index, 1));*/

    }
    $scope.name="";
    $scope.url="";
    $scope.color="";
    $scope.group=[];
    $scope.addSite= function(){

        $scope.promise.sites.push({siteName: $scope.name, url: $scope.url, color: $scope.color});

    //      id = 2001;
    //      console.log(id);
    //         siteName = $scope.name;
    //         console.log(siteName);
    //         url=$scope.url;
    //         console.log(url);
    //         color=$scope.color;
    //         console.log(color);
    //         group=$scope.group;
    //         console.log(group);
    $scope.name="";
    $scope.url="";
    $scope.color="";
    $scope.group=[];
     };

});

我有一个填充物。

searchFilter.js 

{
  "sites":[
          {
                "id": 1,
                "siteName":"Google",
                "url": "www.google.com",
                "color": "green",
                "group": ["Social","Sport","Games","News","Programming"]
          },

          {
                "id": 2,
                "siteName":"Facebook",
                "url": "www.facebook.com",
                "color": "blue",
                "group": []
          },

          {
                "id": 3,
                "siteName":"B92",
                "url": "www.b92.net",
                "color": "red",
                "group": ["Social","Sport"]
          },

          {
                "id": 4,
                "siteName":"9GAG",
                "url": "www.9gag.com",
                "color": "purple",
                "group": []
          }
],

  "groups":[
        {
                "id":1,
                "name":"Search Engine",
                "color":"green",
                "sites":["Google","Yahoo","Bing"]
        },
        {
                "id":2,
                "name":"Social",
                "color":"red",
                "sites":[]
        },
        {
                "id":3,
                "name":"Games",
                "color":"blue",
                "sites":[]
        },
        {
                "id":4,
                "name":"Informations",
                "color":"red",
                "sites":[]

        },
        {
                "id":5,
                "name":"Sport",
                "color":"orange",
                "sites":[]
        },
        {
                "id":6,
                "name":"Television",
                "color":"green",
                "sites":[]
        }
]
}

当然是模态

modal.js 

app.filter('searchFor', function(){
  return function(arr, searchString){
    if(!searchString){
      return arr;
    }
    var result = [];
    searchString = searchString.toLowerCase();
    angular.forEach(arr, function(item){

      if(item.siteName.toLowerCase().indexOf(searchString) !== -1 && item.group.length!=0){
      result.push(item);
    }
    });
    return result;
  };
});

的style.css 

app.directive('modal', function () {
    return {
      template: '<div class="modal fade">' + 
          '<div class="modal-dialog">' + 
            '<div class="modal-content">' + 
              '<div class="modal-header">' + 
                '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' + 
                '<h4 class="modal-title">{{ title }}</h4>' + 
              '</div>' + 
              '<div class="modal-body" ng-transclude></div>' + 
            '</div>' + 
          '</div>' + 
        '</div>',
      restrict: 'E',
      transclude: true,
      //controller:'siteCtrl',
      replace:true,
      scope: true,
      link: function postLink(scope, element, attrs) {
        scope.title = attrs.title;

        scope.$watch(attrs.visible, function(value){
          if(value == true)
            $(element).modal('show');
          else
            $(element).modal('hide');
        });

        $(element).on('shown.bs.modal', function(){
          scope.$apply(function(){
            scope.$parent[attrs.visible] = true;
          });
        });

        $(element).on('hidden.bs.modal', function(){
          scope.$apply(function(){
            scope.$parent[attrs.visible] = false;
          });
        });
      }
    };
  });

我希望我能正确地提出问题，非常感谢你！

0 个答案:

没有答案
相关问题
最新问题