javascript - Accordion 内的 Angular Dynamic ngmodel 名称

Question

我想在下面的场景中有一个动态的 ng-model 名称。在选择部门框时，我将绘制表格。

它适用于，ng-model="department.name"，但它导致了一些其他问题，因为我们还有其他一些内部内容。我希望将名称命名为 ng-model={{department.name}}，以便名称本身是动态的。

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

我尝试创建如下指令。

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);
        }
    };
}]);

但是，我仍然无法使用 dynamic-model={{department.name}}。

谢谢

Answer 1

我认为不需要自定义指令。您可以通过在 ng-models 中使用 javascript 表达式来使用动态模型。这是一个example为此。

就您而言，我认为您正在寻找类似的东西

var app = angular.module('myApp', []);
app.controller('myCtrl', function($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;
        }
    }

    $scope.selectDepartment('hr');
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
    <ul ng-repeat="department in selectedDepartments">
        <li>
            <div>{{department.id}}</div>
            <input type="text" ng-model="department[name]" ng-value="department[name]"> {{department[name]}}
        </li>
    </ul>
</div>

希望这对你有帮助