个人中心
gpt4 book ai didi

angularjs - 使用 AngularJS 选择带有语义 UI 下拉菜单的 ng-options

转载 作者：行者123 更新时间：2023-12-04 23:22:20 26 4
gpt4 key购买 nike

因此，语义 UI 出现在我印象深刻的最新“热门”UI 框架中；然而，它们的下拉菜单不是 HTML 'select' 和 'option' 标签的实现，而是自定义的。对于我的项目，我使用的是 AngularJS，它是一种非凡的 JavaScript MVW 框架。

我如何集成 AngularJS select ng-option与 Semantic UI's dropdown ?我不是一个 JS 专家。这是 JSfidde:http://jsfiddle.net/fMUy3/

    <!doctype html>
<html ng-app="App">

    <body ng-controller="MainCtrl">
            <h3>Option 1 (standard)</h3>

        <select ng-model="selectedItem" ng-options="c as (c.id + ' - ' + c.name) for c in containers">
            <option value="">-- Pick A Container --</option>
        </select>
        <br>ID: {{selectedItem.id}}
        <br>Name: {{selectedItem.name}}
         <h3><a href="http://semantic-ui.com/modules/dropdown.html"> Semantic UI Dropdown</a></h3>

        <div class="ui selection dropdown ">
            <input name="id" type="hidden" value="0">
            <div class="text">-- Pick A Container --</div>  <i class="dropdown icon"></i>   
            <div class="menu transition hidden">
                <div class="item active">-- Pick A Container --</div>
                <div data-value="{{container.id}}" class="item" ng-repeat="container in containers">{{container.name}}</div>
            </div>
    </body>

</html>

JavaScript: 
var app = angular.module('App', []);

app.controller('MainCtrl', function($scope) {
  $scope.containers = [
  {id: 1, name: 'Box1'},
  {id: 2, name: 'Box2'},
  {id: 3, name: 'Box3'}];

  //$scope.selectedItem = $scope.containers[0];
});

$('.ui.dropdown').dropdown();

非常感激!

最佳答案

你的 fiddle 有一些问题。第一个是语义 ui JavaScript 在 jQuery 之前加载。它依赖于 jQuery，因此必须首先加载 jQuery。 (另外，推荐在 AngularJS 之前加载 jQuery。)

第二件事是语义下拉函数在 AngularJS 有机会展开创建选项的转发器之前被调用。这意味着当语义完成下拉操作时选项不存在。作为 简单 解决方案我做了一个超时，将在下一个处理循环中触发；在 AngularJS 完成它的工作之后。您可以看到语义下拉菜单现在起作用了

这更像是 简单 概念证明来演示事物的时间安排，不应使用。
http://jsfiddle.net/fMUy3/1/

$timeout(function(){
    $('.ui.dropdown').dropdown();
},0)

这是怎么回事 应该处理是使用一个指令来处理时间，这样您就不需要使用超时，也不需要在 Controller 中指定每个下拉列表。这是使用指令的示例(它将处理所有情况)

http://jsfiddle.net/fMUy3/7/ 
app.directive('dropdown', function ($timeout) {
    return {
        restrict: "C",
        link: function (scope, elm, attr) {
            $timeout(function () {
                $(elm).dropdown().dropdown('setting', {
                    onChange: function (value) {
                        scope.$parent[attr.ngModel] = value;
                        scope.$parent.$apply();
                    }
                });
            }, 0);
        }
    };
});

关于angularjs - 使用 AngularJS 选择带有语义 UI 下拉菜单的 ng-options，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20559120/

26 4 0
文章推荐： php - 为什么 Apache 没有在 XAMPP 上启动
文章推荐： symfony - 如何在 Symfony2 中启用 Twig 的 dump()
文章推荐： symfony - 服务 "uri_signer"依赖于不存在的参数 "kernel.secret"。你的意思是这个 : "kernel.charset"?
文章推荐： shell - 在构建任何目标后强制 Makefile 执行脚本(就在退出之前)