Question

我正在尝试为选择菜单设置选定的选项，但它无法正常工作，因为我发送到ng-model的数据与选择菜单中的数据有$$hashKey不同，$$hashKey持有对于价值观。

<select class="form-control" ng-model="selManga" ng-options="manga.seri for manga in mangalar"> 
<option value="">Manga Seçin</option> 
</select>
<select ng-change="selPage = 0" ng-model="selChapter" ng-options="selManga.randomword.indexOf(chapter) as chapter.klasor for chapter in selManga.randomword"> 
<option value="">Bölüm</option> 
</select>
<select ng-model="selPage" ng-options="selManga.randomword[selChapter].yol.indexOf(page) as selManga.randomword[selChapter].yol.indexOf(page) + 1 for page in selManga.randomword[selChapter].yol">
</select>

我谷歌它可以解决这个问题track by，但我必须使用as。那么还有另一种绕过它的方法吗？

第一个选择菜单的选定值正在运行但第二个选项不起作用。这是plunker。http://plnkr.co/edit/3V8JSF2AU01ZZNPfLECd?p=info

.controller('nbgCtrl',function  ($scope, MMG, $stateParams) {
var milo = $stateParams.serix;
var musti = $stateParams.klasor;
MMG.adlar.success(function(loHemen) {
    var i, miloMangaInArray;
    for (i=0; i<loHemen.length; i++) {
        if (loHemen[i].seri===milo) {
            miloMangaInArray = loHemen[i];
            break;
        }
    };
    var a;
    for (a=0; a<miloMangaInArray.randomword.length; a++) {
        if(miloMangaInArray.randomword[a].klasor===musti) {
            break;

        }
    }
$scope.mangalar = loHemen; //JSON Data
$scope.selManga = $scope.mangalar[i]; // First select menu's ng-model and its working.
$scope.selChapter = $scope.mangalar[i].randomword[a]; //Second select menu's ng-model and its not working due to no matching JSON data.
});

$scope.next = function (manga, chapter, page) {
    var nextPage = page + 1;
    if (angular.isDefined(manga.randomword[chapter].yol[nextPage])) {
        $scope.selPage = nextPage;
    } else if (angular.isDefined(manga.randomword[chapter + 1])) {
        $scope.selChapter = chapter + 1;
        $scope.selPage = 0;
    }};

})

Answer 1

伙计，你走了，这是解决方案的小提琴 http://jsfiddle.net/yw248mfu/2/

我在这里使用的方法是indexOf来获取最后一个选择的数组中页面的索引，

这不是最好的解决方案，因为它必须应用每次摘要循环运行时的索引，我可以想到许多不同的解决方案，

1-您可以从图像本身的名称中提取页面的ID

2-您可以将pages数组映射为具有以下模式的对象列表

[{"index":1,"img":"00.jpg"},{"index":2,"img":"01.jpg"},{"index":3,"img":"02.jpg"}]

你可以用这段代码做第二个选项

pages.map(function(d,i){return {"index":i,"img":d};});

<强> crouch74

Answer 2

我认为你应该采用AngularJS处理模型和绑定的方式。因此，您无需通过视图代码跟踪所有不同的索引，只需让ng-select为模型的各个部分分配引用（通过ng-model）。通过稍微更改HTML和控制器，您可以简化一些代码，它实际上也可以工作。

首先，在$scope.model = {…}上提供共享的$scope对象。然后，将HTML更改为

<select ng-model="model.selManga" ng-options="manga.seri for manga in mangalar">
  <option value="">Manga Seçin</option>
</select>

<select ng-model="model.selChapter" ng-options="chapter.klasor for chapter in model.selManga.randomword" ng-change="model.selPage = model.selChapter.yol[0]">
  <option value="">Bölüm</option>
</select>

<select ng-model="model.selPage" ng-options="page as model.selChapter.yol.indexOf(page) + 1 for page in model.selChapter.yol">
</select>
<img class="picture" ng-src="http://baskimerkeziankara.com/{{model.selPage}}" ng-click="next(model.selPage)">

之后，更改控制器会相应更改：

.controller('nbgCtrl', function($scope, MMG, $stateParams) {
    var model = {
      selManga: undefined,
      selChapter: undefined,
      selPage: undefined
    };
    $scope.model = model;

    MMG.adlar.success(function _init(loHemen) {
      for (var i = 0; i < loHemen.length; i++) {
        if (loHemen[i].seri === $stateParams.serix) {
          model.selManga = loHemen[i];
          break;
        }
      }

      for (var a = 0; a < model.selManga.randomword.length; a++) {
        if (model.selManga.randomword[a].klasor === $stateParams.klasor) {
          model.selChapter = model.selManga.randomword[a];
          break;
        }
      }

      model.selPage = model.selChapter.yol[0];

      $scope.mangalar = loHemen;
    });

    $scope.next = function _next(page) {
      var pageIndex = model.selChapter.yol.indexOf(page);

      if (angular.isDefined(model.selChapter.yol[pageIndex + 1])) {
        model.selPage = model.selChapter.yol[pageIndex + 1];
      } else {
        var chapterIndex = model.selManga.randomword.indexOf(model.selChapter);

        if (angular.isDefined(model.selManga.randomword[chapterIndex])) {
          pageIndex = 0;

          model.selChapter = model.selManga.randomword[chapterIndex + 1];
          model.selPage = model.selChapter.yol[pageIndex];
        }
      }
      console.log('manga', model.selManga.seri, 
                  'chapter', model.selChapter.klasor,
                  'selPage', pageIndex + 1);
    };
  })

我创建了一个分叉的Plunker来展示它是如何工作的（这个解决方案确实有效）：http://plnkr.co/edit/2aqCUAFUwwXuGQHpuooj

$$ hashKey匹配和选择菜单的选定值

2 个答案: