角度，一個控制器中的數據過濾到其他數據

在開始時，我想說我的新角度。比方說我的網頁看起來像這樣：角度，一個控制器中的數據過濾到其他數據

的index.html：

<body ng-app="application"> 
<div class="container"> 
    <div class="row"> 

    <div class="col-sm-3 sideBar" ng-controller="NavController"> 
    <input ng-model"search"> 
    </div> 
    <div class="col-sm-9 content" ng-controller="ContentController"> 
    <div ng-repeat="meet in meets | filter:search"> 
     {{ meet.someData }} 
    </div> 
    </div> 

    </div> 
</div> 
</body>

，我怎麼能作出這樣的NavController輸入可以從ContentController過濾數據？我想在兩個控制器中執行此操作。

來源

2015-09-11 user3819713

我不確定你爲什麼想在兩個控制器中做到這一點，但它會更困難。搜索功能作用於內容控制器中的數據。我猜測你的佈局正在推動你的控制器設計。

這裏有很多文章討論這方面的技術。這一個：Share data between AngularJS controllers受到好評。

來源

2015-09-11 19:24:54

其實你可以在單個控制器中做到這一點。

var app = angular.module('angularjs-starter', []); 
 

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.name = [{ 
 
    "id":1 
 
    },{ 
 
    "id":2 
 
    },{ 
 
    "id":3 
 
    }] 
 

 
});

<!DOCTYPE html> 
 
<html ng-app="angularjs-starter"> 
 
    
 
    <head lang="en"> 
 
    <meta charset="utf-8"> 
 
    <title>Custom Plunker</title> 
 
    <script src="//code.angularjs.org/1.1.1/angular.js"></script> 
 
    <script src="app.js"></script> 
 
    </head> 
 
    
 
    <body ng-controller="MainCtrl"><input ng-model='find' /> 
 
    <div ng-repeat="x in name | filter : find"> 
 
     {{x.id}} 
 
    </div> 
 
    </body> 
 

 
</html>

對於理解，我使用的號碼的數據。 :)希望它可以幫助你

來源

2015-09-11 19:28:19 Thinker

我知道它更容易做到這一點的一個控制器，但@MikeFeltman猜到了我的佈局didnt讓我做這件事的一個控制器 – user3819713

我覺得擔心能想出是有一個控制器做得太多。我不瞭解你，但我並不熱衷於10,000線長控制器。 – clurect

你可以有一個父控制器通過其他兩個控制器。如果使用controllerAs方法，則可以將控制器放置在彼此的內部，請參閱Angular Style Guide以獲取有關控制器和控制器的有用信息。

你可以這樣寫，並將搜索模型綁定到ParentController。

編輯：我增加了一個解決方案，我認爲是更好的

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

 
app.controller('ParentController', function() { 
 
    this.search = 'p'; //set default just for fun 
 
}); 
 

 
app.controller('NavController', function() { 
 
    //nav stuff 
 

 
}); 
 

 
app.controller('ContentController', function() { 
 
    this.meets = [{ 
 
    data: 'hi' 
 
    }, { 
 
    data: 'potato' 
 
    }, { 
 
    data: 'help me' 
 
    }, { 
 
    data: 'pie' 
 
    }]; 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="app"> 
 
    <div class="container" ng-controller="ParentController as parentVm"> 
 
    <div class="row"> 
 

 
     <div class="col-sm-3 sideBar" ng-controller="NavController as navVm"> 
 
     <input ng-model="parentVm.search"> 
 
     </div> 
 
     <div class="col-sm-9 content" ng-controller="ContentController as contentVm"> 
 
     <div ng-repeat="meet in contentVm.meets | filter:parentVm.search"> 
 
      {{ meet.data }} 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
</body>

我從這個走開了另一種思路的一點，認爲不使用其他涉及控制器。在這裏，您正在使用工廠來在控制器之間進行通信。您必須共享一個對象，以便在輸入中更改search.term時，它將隨每個參考而改變。

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

 
app.factory('Searcher', function() { 
 
    return { 
 
    search: { 
 
     term: 'p' 
 
    } 
 
    }; 
 
}); 
 

 
app.controller('NavController', function(Searcher) { 
 
    //nav stuff 
 
    this.search = Searcher.search; 
 

 
}); 
 

 
app.controller('ContentController', function(Searcher) { 
 
    this.search = Searcher.search; 
 
    this.meets = [{ 
 
    data: 'hi' 
 
    }, { 
 
    data: 'potato' 
 
    }, { 
 
    data: 'help me' 
 
    }, { 
 
    data: 'pie' 
 
    }]; 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="app"> 
 
    <div class="container"> 
 
    <div class="row"> 
 

 
     <div class="col-sm-3 sideBar" ng-controller="NavController as navVm"> 
 
     <input ng-model="navVm.search.term"> 
 
     </div> 
 
     <div class="col-sm-9 content" ng-controller="ContentController as contentVm"> 
 
     <div ng-repeat="meet in contentVm.meets | filter:contentVm.search.term"> 
 
      {{ meet.data }} 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
</body>

來源

2016-11-02 14:30:59 clurect

角度，一個控制器中的數據過濾到其他數據

回答

相關問題