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

Question

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为矩形中的每个字段动态分配字段，以及如何在控制器函数中读取它们

Answer 1

<button id="AddNewField" ng-click="AddNewField();" class="btn btn-success"> Add New </button><div ng-repeat="NewField in NewFieldValues">&nbsp; &nbsp; <div style="width:250px;height:100px;border:1px solid #000;" draggable="true">&nbsp; &nbsp; &nbsp; &nbsp; <select ng-model="Dynamic.BusinessStep[NewField.ID]" ng-change="BusinessStepChange(NewField.ID,'BusinessStep')" class="form-control">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option ng-repeat="businessStep in businessSteps" value="{{ businessStep.value }}"> {{ businessStep.text }} </option>&nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; <br/>&nbsp; &nbsp; &nbsp; &nbsp; <input type="text" ng-model="Dynamic.ObjectCount[NewField.ID]" ng-blur="BusinessStepChange(NewField.ID,'EventCount')"></input>&nbsp; &nbsp; </div></div>$scope.NewFieldValues&nbsp; &nbsp; &nbsp; &nbsp;=&nbsp; &nbsp;[];$scope.FieldID&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; =&nbsp; &nbsp;0;$scope.Dynamic&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; =&nbsp; &nbsp;{};$scope.AddNewField&nbsp; =&nbsp; &nbsp;function(){&nbsp; &nbsp; item&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; =&nbsp; &nbsp;{};&nbsp; &nbsp; item["ID"]&nbsp; &nbsp; &nbsp; =&nbsp; &nbsp;$scope.FieldID;&nbsp; &nbsp; item["Fields"]&nbsp; =&nbsp; &nbsp;[];&nbsp; &nbsp; $scope.NewFieldValues.push(item);&nbsp; &nbsp; $scope.FieldID++;}$scope.BusinessStepChange&nbsp; &nbsp;=&nbsp; &nbsp;function(BusinessStepID, Type){&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; for(var bs=0; bs<$scope.NewFieldValues.length; bs++)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; if($scope.NewFieldValues[bs].ID ==&nbsp; BusinessStepID)&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(Type ==&nbsp; 'BusinessStep')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $scope.NewFieldValues[bs]['Fields'].BusinessStep&nbsp; &nbsp; =&nbsp; &nbsp;$scope.Dynamic.BusinessStep[BusinessStepID];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else if(Type&nbsp; &nbsp; ==&nbsp; 'EventCount')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $scope.NewFieldValues[bs]['Fields'].NumberofElement =&nbsp; &nbsp;$scope.Dynamic.ObjectCount[BusinessStepID];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log($scope.NewFieldValues);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp;}