ng-repeat内部的角度js ng-模型在ng-repeat外部无法访问

时间:2015-10-26 07:01:08

标签: angularjs

我正在重复ng-repeat下拉列表选择的项目时间。当我要访问ng-model时,ng-repeat内部的按钮点击功能在ng-repeat之外我没有得到价值ng-model .it显示未定义。

<div data-ng-repeat="R in RespPerson">
    <table cellpadding="0" cellspacing="0" class="_tblrating" style="margin: 0px; padding: 0px">
        <tr class="_labeltr">
            <td>
                <span>Productivitiy </span>
            </td>
            <td>
                <span>Quality </span>
            </td>
            <td>
                <span>Cost </span>
            </td>
            <td>
                <span>Delivery </span>
            </td>
            <td>
                <span>Safety </span>
            </td>
            <td>
                <span>Environment </span>
            </td>
            <td>
                <span>Technology </span>
            </td>
            <td>
                <span>Aesthetics </span>
            </td>
            <td>
                <span>RPN NO </span>
            </td>
            <td>
                <span>Categorisation of Problem </span>
            </td>
        </tr>
        <tr>
            <td>
                <input id="txtProductivitiy" type="text" ng-bind="obj1=R.Productivitiy" ng-model="R.Productivitiy" class="numericOnly " />
           {{obj1}}
            </td>
            <td>
                <input id="txtQuality" type="text" ng-model="R.Quality" class="numericOnly " />
            </td>
            <td>
                <input id="txtCost" type="text" ng-model="R.Cost" class="numericOnly " />
            </td>
            <td>
                <input id="txtDelivery" type="text" ng-model="R.Delivery " class="numericOnly " />
            </td>
            <td>
                <input id="txtSafety" type="text" ng-model="R.Safety" class="numericOnly " />
            </td>
            <td>
                <input id="txtEnvironment" type="text" ng-model="R.Environment" class="numericOnly " />
            </td>
            <td>
                <input id="txtTechnology" type="text" ng-model="R.Technology" class="numericOnly " />
            </td>
            <td>
                <input id="txtAesthetics" type="text" ng-model="R.Aesthetics " class="numericOnly " />
            </td>
            <td>
                <input id="txtRPNNO" type="text" class="numericOnly" value="{{R.Productivitiy + R.Quality}}" disabled="disabled" />
            </td>
            <td>
                <input id="txtCategorisationProblem" disabled="disabled" type="text" value="{{funCategorisationProblem()}}" />
            </td>
        </tr>
    </table>
</div>
<input id="btnsave" type="button" value="Save" class="btn" ng-click="btnsave()" />
<script>    
    app.controller('spController', function ($scope, $http) {

       $scope.ddlprocessOwnerChange = function () {
       $scope.RespPerson = $scope.ddlprocessowner;
    };

    $scope.btnsave = function () {
      alert($scope.R.Productivitiy);
    };
  }
 </script>

3 个答案:

答案 0 :(得分:1)

这是预期的。 R仅在ng-repeat范围内设置,表示当前(多次)迭代的人。

您的代码基本上等同于

var RespPerson;

function displayAll() {
    for (R in RespPerson) {
        // display R
    }
}

function save() {
    alert(R); 
}

您看到上面的代码无法正常工作。 R仅在第一个函数的for循环中已知。

但是,你可以做的是将当前人作为你职​​能的参数:

$scope.btnsave = function (R) {
  alert(R.Productivitiy);
};

并在视图中:

ng-click="btnsave(R)"

但是,当然,按钮必须再次内部 ng-repeat:每个人必须拥有自己的保存按钮,并且R仅在ng-repeat内可用。如果它在外面,按钮会保存多少人中的哪一个?

答案 1 :(得分:0)

这是一个基本的。在任何语言中,我们都不会尝试在迭代之外访问循环/迭代器变量。

在这里你正在迭代

http://www.w3schools.com/jquery/ajax_ajax.asp 

每个RespPerson迭代的均值一个变量将创建为R,并且仅用于该迭代。不适合下一次迭代。因此,在迭代完成后,变量不在范围内。

现在使用

data-ng-repeat="R in RespPerson"

在您的按钮事件代码中。 R不再存在了。
你应该使用

alert($scope.R.Productivitiy);

答案 2 :(得分:0)

感谢您提供宝贵的时间。 终于得到了答案:)

这是工作代码

<div data-ng-repeat="R in RespPerson">
            <fieldset class="info-box-gradient">
                <legend>{{R.Title}} </legend>
                <table cellpadding="0" cellspacing="0">
                    <tr class="_hdr">
                        <td>
                            <span>Root Cause Analysis </span>
                            <div class="_note">
                                Tick
                                <input id="Checkbox1" type="checkbox" checked="checked" disabled="disabled" />
                                to add Cause to Summary of Root Cause analysis
                            </div>
                        </td>
                    </tr>
                    <tr class="_labeltr" style="padding: 0px;">
                        <td>
                            <table cellpadding="0" cellspacing="0" style="margin: 0px; padding: 0px">
                                <tr>
                                    <td>
                                        <span>Man</span>
                                    </td>
                                    <td>
                                        <span>Material </span>
                                    </td>
                                    <td>
                                        <span>Method </span>
                                    </td>
                                    <td>
                                        <span>Machine </span>
                                    </td>
                                    <td>
                                        <span>Environment </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <input id="chkman1" type="checkbox" ng-model="chkman[R.id]" />
                                        <textarea id="txtman1" cols="20" rows="2" ng-model="txtman[R.id]"></textarea>
                                    </td>
                                    <td>
                                        <input id="chkMaterial1" type="checkbox" ng-model="chkMaterial[R.id]" />
                                        <textarea id="txtMaterial1" cols="20" rows="2" ng-model="txtMaterial[R.id]"></textarea>
                                    </td>
                                    <td>
                                        <input id="chkMethod1" type="checkbox" ng-model="chkMethod[R.id]" />
                                        <textarea id="txtMethod1" cols="20" rows="2" ng-model="txtMethod[R.id]"></textarea>
                                    </td>
                                    <td>
                                        <input id="chkMachine1" type="checkbox" ng-model="chkMachine[R.id]" />
                                        <textarea id="txtMachine1" cols="20" rows="2" ng-model="txtMachine[R.id]"></textarea>
                                    </td>
                                    <td>
                                        <input id="chkEnvironment1" type="checkbox" ng-model="chkEnvironment[R.id]" />
                                        <textarea id="txtEnvironment1" cols="20" rows="2" ng-model="txtEnvironment[R.id]"></textarea>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr class="_hdr">
                        <td>
                            <span>Rating </span>
                            <div class="_note">
                                ( 1 is lowest & 5 is Highest)
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding: 0px">
                            <table cellpadding="0" cellspacing="0" class="_tblrating" style="margin: 0px; padding: 0px">
                                <tr class="_labeltr">
                                    <td>
                                        <span>Productivitiy </span>
                                    </td>
                                    <td>
                                        <span>Quality </span>
                                    </td>
                                    <td>
                                        <span>Cost </span>
                                    </td>
                                    <td>
                                        <span>Delivery </span>
                                    </td>
                                    <td>
                                        <span>Safety </span>
                                    </td>
                                    <td>
                                        <span>Environment </span>
                                    </td>
                                    <td>
                                        <span>Technology </span>
                                    </td>
                                    <td>
                                        <span>Aesthetics </span>
                                    </td>
                                    <td>
                                        <span>RPN NO </span>
                                    </td>
                                    <td>
                                        <span>Categorisation of Problem </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <input id="txtProductivitiy" type="text" ng-model="Productivitiy[R.id]" class="numericOnly " />
                                    </td>
                                    <td>
                                        <input id="txtQuality" type="text" ng-model="Quality[R.id]" class="numericOnly " />
                                    </td>
                                    <td>
                                        <input id="txtCost" type="text" ng-model="Cost[R.id]" class="numericOnly " />
                                    </td>
                                    <td>
                                        <input id="txtDelivery" type="text" ng-model="Delivery[R.id]" class="numericOnly " />
                                    </td>
                                    <td>
                                        <input id="txtSafety" type="text" ng-model="Safety[R.id]" class="numericOnly " />
                                    </td>
                                    <td>
                                        <input id="txtEnvironment" type="text" ng-model="Environment[R.id]" class="numericOnly " />
                                    </td>
                                    <td>
                                        <input id="txtTechnology" type="text" ng-model="Technology[R.id]" class="numericOnly " />
                                    </td>
                                    <td>
                                        <input id="txtAesthetics" type="text" ng-model="Aesthetics[R.id]" class="numericOnly " />
                                    </td>
                                    <td>
                                        <input id="txtRPNNO" type="text" class="numericOnly" value="{{funRPNNO(R.id)}}" disabled="disabled" />
                                        <input id="txtRPNTotal" type="text" ng-model="RPNTotal[R.id]" class="numericOnly" ng-show="False" />
                                    </td>
                                    <td>
                                        <input id="txtCategorisationProblem" disabled="disabled" type="text" value="{{funCategorisationProblem(R.id)}}" />
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <table cellpadding="0" cellspacing="0">
                                <tr>
                                    <td>
                                        <span>Corrective action(CA) </span>
                                    </td>
                                    <td>
                                        <span>Preventive action (PA) </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <textarea id="txtCorrectiveaction" cols="20" rows="2" ng-model="txtCorrectiveaction[R.id]"></textarea>
                                    </td>
                                    <td>
                                        <textarea id="txtPreventiveaction" cols="20" rows="2" ng-model="txtPreventiveaction[R.id]"></textarea>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <table cellpadding="0" cellspacing="0" style="margin: 0px; padding: 0px">
                                <tr>
                                    <td>
                                        <span>Effectiveness </span>
                                    </td>
                                    <td>
                                        <span>Target </span>
                                    </td>
                                    <td>
                                        <span>Actual Date </span>
                                    </td>
                                    <td>
                                        <span>Review Date </span>
                                    </td>
                                    <td>
                                        <span>Status of CA </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <textarea id="txtEffectiveness" cols="20" rows="2" ng-model="txtEffectiveness[R.id]"></textarea>
                                    </td>
                                    <td>
                                        <input id="txtTarget" type="text" ng-model="txtTarget[R.id]" />
                                    </td>
                                    <td>
                                        <input id="txtActualDate" type="text" ng-model="txtActualDate[R.id]" datepicker />
                                    </td>
                                    <td>
                                        <input id="txtReviewDate" type="text" ng-model="txtReviewDate[R.id]" datepicker />
                                    </td>
                                    <td>
                                        <select id="txtStatusofCA" ng-model="txtStatusofCA[R.id]">
                                            <option selected="selected">Pending</option>
                                            <option>Implemented</option>
                                            <option>Non-Implemented</option>
                                        </select>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </fieldset>
        </div>
<input id="btnsave" type="button" value="Save" class="btn" ng-click="btnsave()" />

<script>   
$scope.Productivitiy = {};
    $scope.Quality = {};
    $scope.Cost = {};
    $scope.Delivery = {};
    $scope.Safety = {};
    $scope.Environment = {};
    $scope.Technology = {};
    $scope.Aesthetics = {};
    $scope.RPNTotal = {};

    app.controller('spController', function ($scope, $http) {

       $scope.ddlprocessOwnerChange = function () {
       $scope.RespPerson = $scope.ddlprocessowner;
    };

    $scope.btnsave = function () {
      alert($scope.Productivitiy);//get all ng-model value of "Productivitiy" return array
    };
  }
 </script>