AngularJS根據下拉選擇編號重複HTML內容

我有下拉選擇一個數字。基於選定的值，我需要重複html中的部分。例如，如果我在下拉菜單中選擇3下後，頁面應顯示AngularJS根據下拉選擇編號重複HTML內容

Display section 1 of 3 
Display section 2 of 3 
Display section 3 of 3

請幫忙找出我怎麼能做到這一點。您的時間和幫助非常感謝。
Java腳本：

angular.module("myApp", []) 
    .controller("SolutionCtrl", function SolutionCtrl() { 
    var vm = this; 
    vm.noOfSites = 0; 
    vm.updateSites = function() { 
     console.log(vm.noOfSites); 
    } 
    vm.getTimes = function(n) { 
     return new Array(n); 
    } 
    })

HTML：

<body> 
    <div ng-app="myApp"> 
    <div ng-controller="SolutionCtrl as ctrl"> 
     <div> 
     <h5>Select No of Sites:</h5> 
     <select ng-model="ctrl.noOfSites" ng-change="ctrl.updateSites()"> 
      <option value="1">1</option> 
      <option value="2">2</option> 
      <option value="3">3</option> 
     </select> 
     </div> 
     <div ng-repeat = "t in ctrl.getTimes(ctrl.noOfSites) track by $index"> 
     <h2>Display section {{t}} of 3 </h2>  
     </div> 
    </div> 
    </div> 

</body>

JSFiddle:

來源

2016-07-27 laks

工作小提琴：https://jsfiddle.net/mnaxp5nz/6/

HTML

<body> 
    <div ng-app="myApp" ng-controller="myCtrl"> 
    <div> 
     <div> 
     <h5>Select No of Sites:</h5> 
     <select ng-model = "noOfSites" ng-init = "noOfSites = 0" ng-change = "updateSections();"> 
      <option value="1">1</option> 
      <option value="2">2</option> 
      <option value="3">3</option> 
      <option value="4">4</option> 
      <option value="5">5</option> 
     </select> 
     </div> 
     <div ng-repeat = "section in sections"> 
     Section {{ $index + 1 }} of {{ sections.length }} 
     </div> 
    </div> 

    </div> 
</body>

腳本

<script> 

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

    app.controller('myCtrl', function($scope) { 

    $scope.sections = []; 

    $scope.updateSections = function() { 

     $scope.sections = []; 

     for (counter = 1; counter <= $scope.noOfSites; counter++) { 

     $scope.sections.push(counter); 

     } 

    } 

    }); 

</script>

來源

2016-07-27 05:34:04 Ahsan

優秀。！感謝JSFiddle。 – laks

只需添加腳本中angularjs腳本文件，它爲我工作試試下面一個：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
<script type="text/javascript"> 
angular.module("myApp", []) 
    .controller("SolutionCtrl", function SolutionCtrl() { 
    var vm = this; 
    vm.noOfSites = 0; 
    vm.updateSites = function() { 
     console.log(vm.noOfSites); 
    } 
    vm.getTimes = function(n) { 
     return new Array(n); 
    } 
    }) 
</script> 

<body> 
    <div ng-app="myApp"> 
    <div ng-controller="SolutionCtrl as ctrl"> 
     <div> 
     <h5>Select No of Sites:</h5> 
     <select ng-model="ctrl.noOfSites" ng-change="ctrl.updateSites()"> 
      <option value="1">1</option> 
      <option value="2">2</option> 
      <option value="3">3</option> 
     </select> 
     </div> 
     <div ng-repeat = "t in ctrl.getTimes(ctrl.noOfSites) track by $index"> 
     <h2>Display section {{t}} of 3 </h2>  
     </div> 
    </div> 
    </div> 

</body>

來源

2016-07-27 05:30:22

非常感謝你對你的迴應。 – laks

這個怎麼樣...

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
 
<script type="text/javascript"> 
 
    angular.module("myApp", []) 
 
    .controller("SolutionCtrl", function SolutionCtrl() { 
 
     var vm = this; 
 
     vm.arr = []; 
 
     vm.noOfSites = 0; 
 
     vm.updateSites = function() { 
 
     for (var i = 1; i <= vm.noOfSites; i++) { 
 
      vm.arr.push(i); 
 
     } 
 
     } 
 
     vm.getTimes = function(n) { 
 
     return new Array(n); 
 
     } 
 
    }) 
 
</script> 
 

 
<body> 
 
    <div ng-app="myApp"> 
 
    <div ng-controller="SolutionCtrl as ctrl"> 
 
     <div> 
 
     <h5>Select No of Sites:</h5> 
 
     <select ng-model="ctrl.noOfSites" ng-change="ctrl.updateSites()"> 
 
      <option value="1">1</option> 
 
      <option value="2">2</option> 
 
      <option value="3">3</option> 
 
     </select> 
 
     </div> 
 
     <div ng-repeat="t in ctrl.arr track by $index"> 
 
     <h2>Display section {{t}} of 3 </h2> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</body>

來源

2016-07-27 05:37:19 Sankar

感謝您的幫助。謝謝..！ – laks

你有GetTimes方法返回數組改變。

請在下面嘗試。

angular.module("myApp", []) 
 
    .controller("SolutionCtrl", function SolutionCtrl() { 
 
    var vm = this; 
 
    vm.noOfSites = 0; 
 
    vm.updateSites = function() { 
 
     //console.log(vm.noOfSites); 
 
    } 
 
    vm.getTimes = function(count) { 
 
     //return new Array(n); 
 
     var ratings = []; 
 

 
    for (var i = 0; i < count; i++) { 
 
    ratings.push(i) 
 
    } 
 

 
    return ratings; 
 

 
    } 
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <div ng-app="myApp"> 
 
    <div ng-controller="SolutionCtrl as ctrl"> 
 
     <div> 
 
     <h5>Select No of Sites:</h5> 
 
     <select ng-model="ctrl.noOfSites" ng-change="ctrl.updateSites()"> 
 
      <option value="1">1</option> 
 
      <option value="2">2</option> 
 
      <option value="3">3</option> 
 
     </select> 
 
     </div> 
 
     <div ng-repeat = "t in ctrl.getTimes(ctrl.noOfSites) track by $index"> 
 
     <h2>Display section {{t+1}} of 3 </h2>  
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</body>

來源

2016-07-27 05:37:20

感謝您的時間和精力。 – laks

試試這個

<div ng-app="myApp"> 
<div ng-controller="Ctrl as vm"> 
<div> 
    <h5>Select No of Sites:</h5> 
    <select ng-model="vm.noOfSites" ng-options="durations for durations in vm.stories"></select> 
</div> 
    <div ng-repeat = "t in vm.getTimes(vm.noOfSites) track by $index" ng-show="vm.noOfSites"> 
     <h2>Display section <span data-ng-bind="$index + 1"></span> of <span data-ng-bind="vm.stories.length"></span> </h2> 
    </div> 
</div>

腳本

angular.module('myApp', []) 
.controller('Ctrl', function Ctrl(){ 
    this.stories = [1,2,3] 
    this.getTimes = function(n) { 
     if(n){ 
     return new Array(n); 
     } 
    } 
});

來源

2016-07-29 05:41:37 fahad

AngularJS根據下拉選擇編號重複HTML內容

回答

相關問題