AngularJS過濾器不能與$ scope變量一起工作

我的AngularJS應用程序應該在表格中顯示課程及其等值。該表應該根據select元素的輸入動態顯示結果。

HTML

<form name = "Select University" ng-show = "courseType == 'extern'"> 
    <label for = "University"> University: </label> 
    <select name = "University" id = "repeatSelect" ng-change = "changeIt()"ng-model = "univs.repeatSelect"> 
      <option ng-repeat = "univ in univs.uniNames | orderBy: 'School'" > {{univ.School}} </option> 
    </select> 
    </form> 



Courses at {{univs.repeatSelect}} 
    <table> 
      <tr> 
      <th> Course </th> 
      <th> Equivelance </th> 
      </tr> 

      <tr ng-repeat="x in names | orderBy: 'className' | filter:univs.repeatSelect"> 
      <td>{{ x.className }}</td> 
      <td> {{x.equiv}} </td> 
      </tr> 
    </table>

的JavaScript

$http.get("http://linux.students.engr.scu.edu/~cmulloy/COEN174/getSchools.php") 
    .success(function (response) 
    { 
      $scope.univs.uniNames = response.records; 
    }); 

$scope.univs = 
    { 
      repeatSelect: null, 
      uniNames: null, 
    };

範圍變量{{univs.repeatSelect}}顯示在頁面上。例如，它將在桌面上方顯示「加州大學洛杉磯分校的課程」。但是當我使用univs.repeatSelect作爲ng-repeat的過濾參數時，表格爲空。但是，如果我明確使用'UCLA'作爲過濾器參數，它將起作用並顯示UCLA中的課程。有什麼我失蹤？

來源

2015-11-01 Charles Mulloy

您應該將value屬性添加到您選擇的options中，該屬性會將value屬性值分配給各自的ng-model。

<select name = "University" id = "repeatSelect" ng-change="changeIt()" ng-model="univs.repeatSelect"> 
    <option ng-repeat="univ in univs.uniNames | orderBy: 'School'" value="{{niv.School}}"> {{univ.School}} </option> 
</select>

更好的選擇是使用ng-options這裏在處理select箱。

<select name="University" id="repeatSelect" 
    ng-change="changeIt()" ng-model="univs.repeatSelect" 
    ng-options="univ.School as univ.School in univs.uniNames | orderBy: 'School'"> 
</select>

來源

2015-11-01 22:27:45

@Charles Mulloy有幫助嗎？ –

AngularJS過濾器不能與$ scope變量一起工作

回答

相關問題