9

我的目标是了解如何正确使用 angularJS。我希望能够将变量的选择与使用 angularJS 动态更改 DOM 结构联系起来。我认为我不太了解 angular 提供的文档，而且我在这里或其他地方都没有找到任何示例。任何帮助表示赞赏。

我的想法是我有这个用例，我首先从选择类型开始，然后从选择的类型开始，将创建适当的输入类型元素，然后使用 ng-model 记录（例如从 textareas 到复选框） ，一直由 angularjs 控制器控制以进行验证/限制。我已经习惯了在页面上拥有可克隆元素并使用 jQuery 销毁和创建新元素的想法，但我一直在阅读控制器不应该具有这种逻辑，而应该使用指令/小部件创建。我没有看到任何以这种方式操作的指令或小部件的示例，所以我什至不确定如何继续。我可以使用指令以这种方式操作 DOM，而不仅仅是一次，而是基于被监视的元素多次？

我想做的事的例子。

$scope.types = ['Type1','Type2']

// something along the lines of...
$scope.layouts = {'Type1':['textarea','textarea'], 'Type2':['numeric','datepicker']}

选择类型 1：

  • 显示 2 个文本区域

选择类型 2：

  • 显示数字输入
  • 显示日期选择器
4

2 回答 2

13

我就是这样做的。请注意，这只是一个起点。仍然存在绑定到相应输入中的特定值的问题。我希望它有所帮助。

标记：

<html ng-app="App" ng-controller="MainCtrl">

<body>

  <component index="0"></component>
  <component index="1"></component>
  Current type: {{type}}
  <button ng-click="toggleType()">Toggle</button>

</body>

</html>

指示：

var ngApp = angular.module('App', []).directive('component', function() {
  var link = function(scope, element, attrs) {
    var render = function() {
      var t = scope.layouts[scope.type][attrs.index];
      if (t === 'textarea') {
        element.html('<' + t + ' /><br>');
      }
      else {
        element.html('<input type="' + t + '"><br>');
      }
    };
    //key point here to watch for changes of the type property
    scope.$watch('type', function(newValue, oldValue) {
      render();
    });

    render();
  };
  return {
    restrict : 'E',
    link : link
  }
});

控制器：

var MainCtrl = function MainCtrl($scope) {
  $scope.type = 'Type1';
  $scope.types = [ 'Type1', 'Type2' ];
  $scope.layouts = {
    'Type1' : [ 'textarea', 'textarea' ],
    'Type2' : [ 'number', 'text' ]
  };

  $scope.toggleType = function() {
    if ($scope.type === 'Type1') {
      $scope.type = 'Type2';
    }
    else {
      $scope.type = 'Type1';
    }
  };
};
于 2012-08-08T23:06:38.763 回答
4

我能想到的最简单的方法就是使用 ng-show 和 ng-hide。

http://jsfiddle.net/cfchase/Xn7PA/

<select ng-model="selected_type" ng-options="t for t in types">
</select>

<div ng-show="selected_type=='Type1'">
    <input type="text" id="text1" ng-model="text1"/>
    <input type="text" id="text2" ng-model="text2"/>
</div>

<div ng-show="selected_type=='Type2'">
    <input type="number" id="numeric1" ng-model="numeric1"/>
    <input type="date" id="date1" ng-model="date1"/>
</div>

当然，您可以在不将任何逻辑放入 html 的情况下清理它，但我不想在控制器中使用额外的东西来掩盖问题。

有关验证，请参阅表单文档。很可能您将主要使用内置验证的 AngularJS 以及您构建的一些自定义验证。

至于指令，网上的文档很密集，但你试验了一会儿就会点击。对于更温和的介绍，Jon Lindquist 在YouTube 上有一个 hello world 教程。指令绝对是在 Angular 中进行 DOM 操作的方式。

于 2012-08-08T01:45:14.137 回答