在Angularjs中动态分配ng-model并读取Controller函数中的值答案

【问题标题】：In Angularjs to assign ng-model for dynamically and read the values in Controller function在Angularjs中动态分配ng-model并读取Controller函数中的值
【发布时间】：2020-07-20 08:22:08
【问题描述】：

当用户单击add 按钮时，我正在尝试创建一个新矩形。这个矩形也将有一个输入字段并为这些字段选择我试图动态分配ng-model 并读取控制器中的相应值。

HTML:

<button id="AddNewField" ng-click="AddNewField();" class="btn btn-success"> Add New </button>
<div ng-repeat="(key,value) in NewFieldValues">
    {{ value.ID }}
    <div style="width:250px;height:100px;border:1px solid #000;" draggable="true">
        <select ng-model="BusinessStep[value.ID]" ng-change="BusinessStepChange(value.ID)" class="form-control">
            <option ng-repeat="businessStep in businessSteps" value="{{ businessStep.value }}"> {{ businessStep.text }} </option>
        </select>
        <br/>
        <input type="text" ng-model="Events[value.ID]"></input>
    </div>
</div>

Angularjs: $scope.NewFieldValues = [];

$scope.FieldID          =   0;

$scope.AddNewField  =   function(){
    item            =   {};
    item["ID"]      =   $scope.FieldID;
    item["Fields"]  =   [];
    $scope.NewFieldValues.push(item);
    $scope.FieldID++;
}

$scope.BusinessStepChange   =   function(BusinessStepID){
    
    for(var bs=0; bs<$scope.NewFieldValues.length; bs++)
    {
        if($scope.NewFieldValues[bs].ID ==  BusinessStepID)
        {
            console.log($scope.NewFieldValues[bs]);
            console.log($scope.BusinessStep);
            $scope.NewFieldValues[bs]['Fields'].BusinessStep    =   "Hello"; //Read the value from corresponding select field
        }
    }       
}

如何为矩形中的每个字段动态分配 ng-model 字段，以及如何在控制器函数中读取它们

【问题讨论】：

经过更多的搜索和实验，我能够做到这一点。发布答案，因为它可能对其他人有用。

标签： javascript angularjs angular-ngmodel angularjs-controller

【解决方案1】：

<button id="AddNewField" ng-click="AddNewField();" class="btn btn-success"> Add New </button>

<div ng-repeat="NewField in NewFieldValues">
    <div style="width:250px;height:100px;border:1px solid #000;" draggable="true">
        <select ng-model="Dynamic.BusinessStep[NewField.ID]" ng-change="BusinessStepChange(NewField.ID,'BusinessStep')" class="form-control">
            <option ng-repeat="businessStep in businessSteps" value="{{ businessStep.value }}"> {{ businessStep.text }} </option>
        </select>
        <br/>
        <input type="text" ng-model="Dynamic.ObjectCount[NewField.ID]" ng-blur="BusinessStepChange(NewField.ID,'EventCount')"></input>
    </div>
</div>


$scope.NewFieldValues       =   [];
$scope.FieldID              =   0;
$scope.Dynamic              =   {};

$scope.AddNewField  =   function(){
    item            =   {};
    item["ID"]      =   $scope.FieldID;
    item["Fields"]  =   [];
    $scope.NewFieldValues.push(item);
    $scope.FieldID++;
}

$scope.BusinessStepChange   =   function(BusinessStepID, Type){
    
    for(var bs=0; bs<$scope.NewFieldValues.length; bs++)
    {
        if($scope.NewFieldValues[bs].ID ==  BusinessStepID)
        {
            if(Type ==  'BusinessStep')
            {
                $scope.NewFieldValues[bs]['Fields'].BusinessStep    =   $scope.Dynamic.BusinessStep[BusinessStepID];
            }
            else if(Type    ==  'EventCount')
            {
                $scope.NewFieldValues[bs]['Fields'].NumberofElement =   $scope.Dynamic.ObjectCount[BusinessStepID];
            }               
            console.log($scope.NewFieldValues);
            break;
        }
    }       
}

【讨论】：