如何通过给定的选项值进行ng-repeat

时间:2016-06-14 10:25:51

标签: angularjs

所以我的问题如下,我有这个HTML

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
        <modelVersion>4.0.0</modelVersion>
        <groupId>some.group</groupId>
        <artifactId>some-artifact</artifactId>
        <version>1.1</version>
</project>

我试图做的是,当用户将select更改为另一个值时,我会通过ng-repeat生成给定数量的测试输入

        <div class="col-sm-4">
            <p><span>Teste A/B:</span></p>
            <label class="label-radio">
                <input type="radio" class="radio" name="ab-test" value="true" ng-model="isTestAvailable"> Sim </label>
            <label class="label-radio">
                <input type="radio" class="radio" name="ab-test" value="false" ng-model="isTestAvailable"> Não </label>
        </div>
        <div class="col-sm-4">
            <p><span>Nº de testes:</span></p>
            <select class="form-control" ng-model="tests.number">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
        </div>
    </div>

我的控制器包含此$ watch

    <div ng-if="isTestAvailable == 'true'" ng-repeat="test in tests">
        <hr>
        <div class="row">
            <div class="col-sm-12">
                <h3>Test {{$index}}</h3>
                <p><span>Specifications:</span></p>
                <textarea id="teste1" class="form-control" onkeyup="resizeTextarea('test1')" data-resizable="true"></textarea>
            </div>
        </div>
        <hr>
    </div>

我尝试使用以便在值更改时更改测试对象的数量,我尝试使用一个简单的变量并执行$scope.$watch("tests.number", function(newVal, oldVal) { $scope.tests = [{}]; var i = parseInt(newVal); for(var x = i; x <= newVal; x++) { $scope.tests.push({}); } }); 而不是没有工作,我能做什么这样,ng-repeat与我给定的选择选项值一起工作?

1 个答案:

答案 0 :(得分:1)

我建议您使用另一个变量而不是tests.number,因为您在观察者中覆盖它。 请检查这个plunker:https://plnkr.co/edit/XnV9MKjIYe1YOL4hR6Le?p=preview 我使用另一个变量并绑定ng-change而不是watch

<select class="form-control" ng-model="testNumber" ng-change="changeTestNumber()">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>