Looking for a way to make the ng-model name dynamic in this specific situation. Whenever a department is selected, the form needs to be updated accordingly.
Currently, it works with ng-model="department.name", but this is causing some unexpected issues due to internal conflicts. I am exploring the option to set the name as ng-model={{department.name}}, allowing the name itself to be dynamic.
<div ng-app >
<ul ng-repeat="department in selectedDepartments">
<li>
<div>{{department.id}}</div>
<input type="text" ng-model={{department.name}}" >
</li>
</ul>
</div>
function DepartmentController($scope) {
$scope.selectedDepartments = {};
$scope.departments = [
"audit": [{id:0,name:"auditDept0"},{id:0,name:"auditDept1"}],
"hr": [{id:0,name:"hrDept0"},{id:0,name:"hrDept1"}],
"finance": [{id:0,name:"financeDept0"},{id:0,name:"financeDept1"}]
];
$scope.selectDepartment = function(name) {
if(name=="hr") {
$scope.selectedDepartments = $scope.departments.hr;
} else if(name=="finance") {
$scope.selectedDepartments = $scope.departments.finance;
}
}
}
I attempted to create a custom directive as follows:
this.app.directive('dynamicModel', ['$compile', '$parse', function ($compile, $parse) {
return {
restrict: 'A',
terminal: true,
priority: 100000,
link: function (scope, elem) {
var name = $parse(elem.attr('dynamic-model'))(scope);
elem.removeAttr('dynamic-model');
elem.attr('ng-model', name);
$compile(elem)(scope);
}
};
}]);
However, I am still facing challenges in using
dynamic-model={{department.name}}Thank you!