个人中心
gpt4 book ai didi

javascript - 如何将多值变量传递给 AngularJS 指令

转载 作者：行者123 更新时间：2023-12-03 08:32:28 25 4
gpt4 key购买 nike

我现在正在研究一个非常简单的小 AngularJS 指令。我刚刚开始研究它，所以还没有太多东西。另外，我对 AngularJS 很陌生，所以请尽可能简化您的答案!

基本上，这个指令将是一个简单的组合框。如果您不知道我所说的组合框是什么意思，它是一个下拉框，显示根据用户在搜索栏中输入的文本过滤的结果。

我目前所坚持的部分是尝试添加类别功能。我希望下拉框中的元素按类别组织。这张图片的左侧是我的意思的一个很好的例子:

enter image description here

在下面的代码中，我需要做什么才能允许指令的用户传递其元素列表以及这些元素分配到的类别？

索引.html

    <!DOCTYPE html>
<html>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="bossy.combobox.js"></script>

    <head>
      <title>60minish tutorial</title>
    </head>

    <body>

        <div ng-app="test">
            <director 
            data='{elements: ["Apple","Banana","Celery","Carrots"], multi:true}'
            ></director> 
        </div>

    </body>
</html>

combobox.js:

    function testContoller($scope){
        $scope.elements = $scope.data.elements;

        $scope.list = $scope.elements.slice();

        $scope.selectedElements = [];

        $scope.submitElement = function(element) 
        {
            if($scope.selectedElements.indexOf(element) == -1) 
            {
                $scope.selectedElements.push(element);

                var index = $scope.list.indexOf(element);
                $scope.list.splice(index, 1);
            }
        }

        $scope.removeElement = function(element) 
        {
            $scope.list.push(element);

            var index = $scope.selectedElements.indexOf(element);
            $scope.selectedElements.splice(index, 1);
        }
}

function create(){
    var template =  '{{elements}}'+
                    '<br>'+
                    '<div><input type="text" value="John" data-ng-model="name"/></div>'+
                    '<select>'+
                        '<option data-ng-repeat="element in list| filter:name" ng-click="submitElement(element)">{{element}}</option>'+
                    '</select>'+
                    '<ul>'+
                        '<li data-ng-repeat="element in selectedElements">{{element}} <button ng-click="removeElement(element)">x</button> </li>'+
                    '</ul>'+
                    '<div data-ng-repeat="x in elements| filter:name">{{x}}</div>';

  return {

    restrict: 'E',

    scope: {
        data: '='
    },
    template: template,
    controller: testContoller,

  };
}


create.$inject = [];

testContoller.$inject = ['$scope'];

angular.module('test',[])
        .controller('init', testContoller)
        .directive('director', create);

最佳答案

这里:http://plnkr.co/edit/GzO6I70y1pWm1RedLLEd?p=preview数据是硬编码的......但我认为你可以从这里获取......

HTML

<select>
  <optgroup ng-repeat="category in categories" label="{{category}}">
    <option ng-repeat="category in products | filter: category"  value="volvo">{{category.name}}</option>
  </optgroup>
</select>

JS

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.categories = [];

  $scope.products = [
    {
      category:'fruits',
      name:'Apple' 
    },
    {
      category:'fruits',
      name:'Pearl' 
    },
    {
      category:'meat',
      name:'Sirloin' 
    },
    {
      category:'meat',
      name:'Beef' 
    },
    {
      category:'meat',
      name:'Chicken' 
    }
    ];

    for (var i = 0; i < $scope.products.length; i++) {
      var element = $scope.categories.indexOf($scope.products[i].category);

      if (element == -1) {
        $scope.categories.push($scope.products[i].category);
      }
    }
});

关于javascript - 如何将多值变量传递给 AngularJS 指令，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33287764/

25 4 0
文章推荐： javascript - 在 JavaScript 中格式化 document.write() 的输出
文章推荐： javascript - 如何仅在 react 文档的特定字段发生变化时才运行跟踪器计算？
文章推荐： javascript - 我正在做一项练习，目标是从代码学院打印出 "steve"和 "bill"，它只打印出一个名字而不是两个
文章推荐： javascript - 通过 Ajax 从 Django 连续获取图像
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com