Question

我正在学习Angular JS并尝试创建一个下拉框作为指令。我已经完成了这个（在我的实际代码中我使用了templateURL），但现在我需要能够读取属性＆＃39; value＆＃39;从下拉框中回复更改。

我可以在Jquery中执行此操作，并编写了一个小脚本来显示我想要查看的行为。我的问题是如何使用Angular来复制这种行为。

以下是Plunker中的测试脚本：http://plnkr.co/edit/Vguftwf8zfY7ZeAoGYfq

它也在下面：

<!DOCTYPE html>
<html ng-app="test">
<head>
    <title>This is a test</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
</head>
<body>
    <div id="dd"><runs></runs></div>
<div id="other">Here is other input box
    <input type='text' name='other'/></div>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js">     </script>
    <script>
        'use strict'
        var app = angular.module('test', [])
        app.directive('runs', function() {
            return{
                restrict: 'E',
                template: '<select name="runs" id="runs"><option value ="0">Zero</option><option value ="1">One</option><option value ="2">Two</option><option value ="other">Other</option></select>',
                scope: {
                    value: '@'
                },
                link: function(scope, element, attrs) {


                    //if (attrs('value') === 'other'){
                    //    set other div to visible
                    // }
                }
            }
        })

        $(document).ready(function(){
            $("#other").hide();
            $("#runs").change(function(){
                if($("#runs option:selected").val()==="other"){
                    $("#other").show();
                } else{
                    $("#other").hide();
                }

            })
        })

    </script>
</body>

Answer 1

首先，您希望<select>使用ng-model绑定到数据模型。

当角度遇到html中的ng-model时，如果在其中遇到的范围不包含此变量，则angular会创建它。

<select ng-model="model.runs">

我随意命名了对象model和属性runs。

现在您可以使用ng-show来评估该值：

<div id="other" ng-show="model.runs=='other'">

许多angular的内置指令将评估javascript表达式。在这种情况下，将model.runs=='other'评估为布尔值。

请注意，更改选择现在将切换元素的显示，而不会编写任何其他脚本，只需进行一些标记修改

的 DEMO

Answer 2

这是一个指令示例，希望这对您有帮助。

<kaze-dropdown is-button ng-model="item" items="options" callback="callbackFunc(item)"></kaze-dropdown>

JSFiddle

Angular Directive下拉框

2 个答案: