Question

请在帮助时使用＆＃39; angular-directive＆＃39;。你可以通过jquery，纯javascript或角度来帮助我

 <html ng-app>
  <div ng-controller="ctrl">
    <div>
       <select ng-model="m.roleId" ng-change="loadPersons(m.roleId)" ng-options="w.roleId as w.roleName for w in roles">
                    <option value=""></option>
       </select>

       <select ng-model="m.contactId" ng-options="w.contactId as w.personName for w in personList">
                    <option value=""></option>
        </select>

        <button ng-click="addRow()">Add Row</button>
        <button ng-click="click(m)">click</button>
    </div>
  </div>

</html>

请参考http://jsfiddle.net/micronyks/ZwwH7/3/小提琴，自动你会知道我想要什么，因为我已经放了适当的信息。

小提琴会告诉你一切，请立即打开那个小提示来帮助我。

现在我的.js文件

function ctrl($scope) {
    alert('as page loads, I want these two Dropdows as they come (no change)')
    $scope.roles=[{ roleId:1, roleName:"Admin"},{roleId:2,roleName:"guest"}];
    $scope.persons = [{contactId: 1,roleId:1,personName: "Joy"},
                      {contactId: 2,roleId:1,personName: "Jack"},
                      {contactId: 3,roleId:1,personName: "Jonh"},
                      {contactId: 4,roleId:2,personName: "Gereth"}];

     $scope.loadPersons=function(id)
     {
          $scope.personList=[];
           angular.forEach($scope.persons,function(person)
                {
                    if(person.roleId==id)
                    {
                        $scope.personList.push(person);
                    }
                })
       };
     $scope.addRow=function()
     {
        alert('as I click this button, I want same dropdowns with pre-loaded data dynamically in next line and so on');
     }

     $scope.click=function(data)
     {   console.log(data.roleId);
         console.log(data.contactId);
     }

}

Answer 1

希望这是你想要做的 - 我仍然在猜你的描述。但似乎你正在试图管理一个人名单，每个人也可以成为另一个人的联系人。您希望此列表可以选择添加新人。

为了说明使用指令，我创建了这个Plunkr： http://plnkr.co/edit/hz5oGFXcd55AsFLpO5GJ?p=preview

对此而言，指令必要并非如此......但它使得代码结构非常好。管理个人所涉及的所有工作都在一个代码块和模板（人）中，管理LIST所涉及的所有工作都在另一个中。这使得易于维护和可读性。

这里的指令非常简单。它只不过是一个带有一些额外标志的控制器：

myApp.directive('person', function() {
  return {
    restrict: 'E',
    replace: true,
    scope: {
      person: '='
    },
    templateUrl: 'person.html',
    link: function($scope) {
      $scope.click = function() {
        alert('You clicked person ID ' + $scope.person.contactId);
      };
    }
  };
});

你真的不需要对这些额外的参数做太多的工作，因为在使用这个模式时你几乎总是会使用相同的标志。但基本上他们告诉Angular创建一个新的HTML元素，你可以在你的人员列表中使用，获取一个名为“person”的参数（你在ng-repeat中使用），以及使用什么模板。并且您将每个条目的代码和回调（如每行单击处理程序）放入链接函数中。该指令自动在其下面有一个控制器。

使用带有预加载数据的ng-Options绑定动态下拉列表

1 个答案: