找到你要的答案

Q:Angularjs: Filtering using multiple combobox directives on the same data set

Q:Angularjs:使用多个组合框的指令在同一数据集过滤

I'm trying to use a directive twice and filter using the options created by the directives. For some reason the chemicalsFilter isn't working as expected. If I use either of the filters on the ng-repeat it works but using both together isn't working. I'm wondering if this could be a scope issue within the directives but each seem to return the correct data. It outputs in the console as I expect but the filtering just doesn't work as expected.

Any ideas? If I can get this sorted it will be so much easier creating multiple combo boxes in my project.

This is my example plnkr: http://plnkr.co/edit/FTPdSSiKSOZiWptfJzuC?p=preview

Original example (both examples do the same thing): http://democode.6te.net/filterusingdirectives/

        <div ng-controller="resultsCtrl">

            <div ng-controller="chemicals">

                <combo-box url="/filterusingdirectives/php/getChemicals.php" list-name="Select Chemicals" loading-message="loading chemicals ..." combo-box-directive-selected-values="getSelectedChemicalValues"></combo-box>

            </div>
            <div ng-controller="letters">

                <combo-box url="/filterusingdirectives/php/getLetters.php" list-name="Select Letters" loading-message="loading letters ..." combo-box-directive-selected-values="getSelectedLetterValues"></combo-box>

            </div>

            <div ng-repeat="result in results | chemicalsFilter:selectedChemicalValues | lettersFilter:selectedLetterValues">
                letterId:   {{result.letterId}}
                <br />
                chemicalId: {{result.chemId}}
                <br />
                name: {{result.name}}
                <br /><br />
            </div>
        </div>  

我试图使用指令两次,并使用指令创建的选项进行筛选。由于某些原因,chemicalsfilter不正常工作。如果我使用任何一个过滤器在NG重复它的作品,但两者一起使用是行不通的。我想知道这是否可能是指令范围内的问题,但每个似乎返回正确的数据。它的输出在控制台,正如我所期望的,但过滤不工作,如预期。

有什么想法?如果我能得到这个排序,这将是更容易创建多个组合框在我的项目。

This is my example plnkr: http://plnkr.co/edit/FTPdSSiKSOZiWptfJzuC?p=preview

Original example (both examples do the same thing): http://democode.6te.net/filterusingdirectives/

        <div ng-controller="resultsCtrl">

            <div ng-controller="chemicals">

                <combo-box url="/filterusingdirectives/php/getChemicals.php" list-name="Select Chemicals" loading-message="loading chemicals ..." combo-box-directive-selected-values="getSelectedChemicalValues"></combo-box>

            </div>
            <div ng-controller="letters">

                <combo-box url="/filterusingdirectives/php/getLetters.php" list-name="Select Letters" loading-message="loading letters ..." combo-box-directive-selected-values="getSelectedLetterValues"></combo-box>

            </div>

            <div ng-repeat="result in results | chemicalsFilter:selectedChemicalValues | lettersFilter:selectedLetterValues">
                letterId:   {{result.letterId}}
                <br />
                chemicalId: {{result.chemId}}
                <br />
                name: {{result.name}}
                <br /><br />
            </div>
        </div>  
answer1: 回答1:

inner loops must be replaced with respective selected("selectedLetterValues and selectedChemicalValues") values instead of results.

lettersFilter :

for (var i = 0; i < results.length; i++) {
 for (var j = 0; j < selectedLetterValues.length; j++) {
    .......
 }
}

chemicalsFilter :

for (var i = 0; i < results.length; i++) {
 for (var j = 0; j < selectedChemicalValues.length; j++) {
    .......
 }
}

Updated : I don't see any other issue apart from logic. May be you have debugged it and thought why filters is executing multiple times, might be this is an issue. here is the explanation

Why your code is not working?

when you click Acetic acid ( for sake of comfort we will go with letterId only)

in chemicalsFilter(results, selectedChemicalValues):
input  results=[letterID:10, letterId:20, litterId:30]
       selectedChemicalValues=[letterId:20, litterId:30]

       for (var i = 0; i < results.length; i++) {
        for (var j = 0; j < results.length; j++) {
           .......
        }
       }

output filteredResults = [letterId:20, litterId:30]

in lettersFilter(filteredResults, selectedLetterValues):
input results=[letterId:20, litterId:30]
      selectedLetterValues=[letterID:10, letterId:20, litterId:30]

      for (var i = 0; i < results.length; i++) {
       for (var j = 0; j < results.length; j++) {
           .......
       }
      }

output filteredResults = [letterId:20]

In lettersFilter both outer loop and inner loop are checking size on results.length so it will never get chance to compare 3rd index, so it retruns 2nd index which contains Acetone

内环路必须各自选择的替代(“selectedlettervalues和selectedchemicalvalues”)而不是结果值。

lettersfilter:

for (var i = 0; i < results.length; i++) {
 for (var j = 0; j < selectedLetterValues.length; j++) {
    .......
 }
}

chemicalsfilter:

for (var i = 0; i < results.length; i++) {
 for (var j = 0; j < selectedChemicalValues.length; j++) {
    .......
 }
}

Updated : I don't see any other issue apart from logic. May be you have debugged it and thought why filters is executing multiple times, might be this is an issue. here is the explanation

为什么你的代码不工作?

当你点击乙酸(为了安慰我们letterid只)

in chemicalsFilter(results, selectedChemicalValues):
input  results=[letterID:10, letterId:20, litterId:30]
       selectedChemicalValues=[letterId:20, litterId:30]

       for (var i = 0; i < results.length; i++) {
        for (var j = 0; j < results.length; j++) {
           .......
        }
       }

output filteredResults = [letterId:20, litterId:30]

in lettersFilter(filteredResults, selectedLetterValues):
input results=[letterId:20, litterId:30]
      selectedLetterValues=[letterID:10, letterId:20, litterId:30]

      for (var i = 0; i < results.length; i++) {
       for (var j = 0; j < results.length; j++) {
           .......
       }
      }

output filteredResults = [letterId:20]

在lettersfilter外环和内环的大小对results.length检查所以它永远不会有机会比较第三指数第二指数收益,因此含有丙酮

angularjs  angularjs-directive