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

Question

我正在尝试在用户单击 add 按钮时创建一个新矩形。这个矩形也有一个输入字段和 select 这些字段我正在尝试动态分配 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 字段以及如何在控制器函数中读取它们

Answer 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;
        }
    }       
}

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

In Angularjs to assign ng-model for dynamically and read the values in Controller function

javascript

angularjs

angularjs-controller

angular-ngmodel