基于控制器中的模型的角度更新 ng-repeat

Question

我是 Angular 的新手。我正在尝试使用 ng-repeat 显示品牌列表。它工作正常。但是当我单击下一个按钮时，它也应该更改相应的数组索引。它不适合我。请帮我解决这个问题。并告诉最好的方式来构建这种类型的案例。我的代码在下面

var data = [{"Measure":"Measure1","Flavours":[{"FlavourName":"flavourname1","TotalBrands":[{"BrandName":"Brand1"},{"BrandName": "Brand2"}]},{"FlavourName":"flavourname2","TotalBrands":[{"BrandName":"Brand3"},{"BrandName":"Brand4"}]}]}]; var myApp = angular.module("survey",[]);

<body>
    <div ng-app="survey">
        <div ng-controller="DataController">
            <button ng-click="getPreviousFlavour()">Previous</button>
            <p>Flavour Count {{flavourCount}}</p>
            <p>Measure : {{surveyList[measureCount].Measure}}</p>
            <p> Flavours Name : {{flavours[flavourCount].FlavourName}}</p>
            <p>All Brands</p>
            <div ng-repeat="brand in totalBrands">
                <p>{{brand.BrandName}}</p>
            </div>
            <button ng-click="getNextFlavour()">Next</button>
        </div>
    </div>
</body>

    myApp.controller("DataController",['$scope',function($scope){
$scope.name = "sajid";
$scope.measureCount = 0;
$scope.flavourCount = 0;
$scope.surveyList = data;
$scope.listLength = $scope.surveyList.length;
$scope.flavours = $scope.surveyList[$scope.measureCount].Flavours;
$scope.totalBrands = $scope.flavours[$scope.flavourCount].TotalBrands;


$scope.getPreviousMeasure = function(){
    if($scope.measureCount === 0){
        $scope.measureCount = 0;
    }else{
        $scope.measureCount = $scope.measureCount - 1;  
    }
};
$scope.getNextMeasure = function(){
    if($scope.listLength-1 === $scope.measureCount){
        $scope.measureCount = 0;
    }else{
        $scope.measureCount = $scope.measureCount + 1;  
    }
};

$scope.getPreviousFlavour = function(){

    if($scope.flavours === 0){
        $scope.measureCount = $scope.measureCount - 1;
        $scope.flavourCount = 0;
    }else{
        $scope.flavourCount = $scope.flavourCount -1;   
    }
};

$scope.getNextFlavour = function(){
    if($scope.flavours.length  === $scope.flavourCount){
        $scope.measureCount = $scope.measureCount + 1;
        $scope.flavourCount = 0;
    }else{
        $scope.flavourCount = $scope.flavourCount + 1;  
    }

};

}]);

Answer 1

你应该插入 getPreviousFlavour 和 getNextFlavour 的最后一行

$scope.totalBrands = $scope.flavours[$scope.flavourCount].TotalBrands;

这更新了 totalBrands。

$scope.getPreviousFlavour = function(){

    if($scope.flavours === 0){
        $scope.measureCount = $scope.measureCount - 1;
        $scope.flavourCount = 0;
    }else{
        $scope.flavourCount = $scope.flavourCount -1;   
    }
    $scope.totalBrands = $scope.flavours[$scope.flavourCount].TotalBrands;
};

$scope.getNextFlavour = function(){
    if($scope.flavours.length  === $scope.flavourCount){
        $scope.measureCount = $scope.measureCount + 1;
        $scope.flavourCount = 0;
    }else{
        $scope.flavourCount = $scope.flavourCount + 1;  
    }
    $scope.totalBrands = $scope.flavours[$scope.flavourCount].TotalBrands;  
};