Angualar手风琴内部动态ng型号名称

问题描述：

我想在下面的场景中有一个动态ng-model名称。在选择部门框中，我将绘制表格。Angualar手风琴内部动态ng型号名称

它适用于， 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}}。

谢谢

答

我认为不需要自定义指令。您可以在ng模型中使用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>

我希望这会帮助你

Angualar手风琴内部动态ng型号名称

相关推荐