首页 \ 问答 \ AngularJS切换用户选择的css主题(AngularJS switch css theme on user selection)

AngularJS切换用户选择的css主题(AngularJS switch css theme on user selection)

我从bootswatch下载了主题,并试图让用户切换主题。 当主题切换时,所有的bootstap css暂时消失,直到新主题被加载。 我怎样才能防止改变,直到加载CSS或切换回默认主题,直到新的加载?

index.ejs(头部)

<link rel="stylesheet" href="/external/bootstrap/css/bootstrap_yeti.min.css"
      ng-if="myTheme == ''">
<link rel="stylesheet" ng-href="/external/bootstrap/css/bootstrap_{{myTheme}}.min.css"
      ng-if="myTheme != ''">

选择

<select class="form-control"
        id="theme"
        name="theme"
        ng-model="theme"
        ng-change="newTheme()">
  <option value="" disabled>Select Theme</option>
  <option ng-repeat="(key, val) in availableThemes" value="{{val}}">{{key}}</option>
</select>

控制器在索引上

$scope.myTheme = '';
$rootScope.$watch('myTheme', function(value) {
  if (value != undefined) {
    $scope.myTheme = value;
  }
});

控制器进行选择

$scope.availableThemes = {
  Cerulean: 'cerulean',
  Cosmo:    'cosmo',
  Yeti:     'yeti'
};
$scope.newTheme = function() {
  console.log($scope.theme);
  if ($scope.theme != undefined) {
    $rootScope.myTheme = $scope.theme;
  }
}

任何帮助表示赞赏! 谢谢


I downloaded the themes from bootswatch and I'm trying to allow the user to switch the theme. When the theme is switched all the bootstap css temporarily goes away until the new theme is loaded. How can I prevent the change until the css is loaded or switch back to the default theme until the new one is loaded?

index.ejs (in the head)

<link rel="stylesheet" href="/external/bootstrap/css/bootstrap_yeti.min.css"
      ng-if="myTheme == ''">
<link rel="stylesheet" ng-href="/external/bootstrap/css/bootstrap_{{myTheme}}.min.css"
      ng-if="myTheme != ''">

Selection

<select class="form-control"
        id="theme"
        name="theme"
        ng-model="theme"
        ng-change="newTheme()">
  <option value="" disabled>Select Theme</option>
  <option ng-repeat="(key, val) in availableThemes" value="{{val}}">{{key}}</option>
</select>

controller on index

$scope.myTheme = '';
$rootScope.$watch('myTheme', function(value) {
  if (value != undefined) {
    $scope.myTheme = value;
  }
});

controller for selection

$scope.availableThemes = {
  Cerulean: 'cerulean',
  Cosmo:    'cosmo',
  Yeti:     'yeti'
};
$scope.newTheme = function() {
  console.log($scope.theme);
  if ($scope.theme != undefined) {
    $rootScope.myTheme = $scope.theme;
  }
}

Any help is appreciated! Thank you


原文:https://stackoverflow.com/questions/25568801
更新时间:2021-09-15 20:09

最满意答案

唯一不同的是,一个接受BiConsumer而另一个只接受消费者。

这里有相关代码:

// forEach
static final class ForEachMappingTask<K,V>
    extends BulkTask<K,V,Void> {
    final BiConsumer<? super K, ? super V> action;
    ForEachMappingTask
        (BulkTask<K,V,?> p, int b, int i, int f, Node<K,V>[] t,
         BiConsumer<? super K,? super V> action) {
        super(p, b, i, f, t);
        this.action = action;
    }
    public final void compute() {
        final BiConsumer<? super K, ? super V> action;
        if ((action = this.action) != null) {
            for (int i = baseIndex, f, h; batch > 0 &&
                     (h = ((f = baseLimit) + i) >>> 1) > i;) {
                addToPendingCount(1);
                new ForEachMappingTask<K,V>
                    (this, batch >>>= 1, baseLimit = h, f, tab,
                     action).fork();
            }
            for (Node<K,V> p; (p = advance()) != null; )
                action.accept(p.key, p.val);
            propagateCompletion();
        }
    }
}

// forEachEntry
static final class ForEachEntryTask<K,V>
    extends BulkTask<K,V,Void> {
    final Consumer<? super Entry<K,V>> action;
    ForEachEntryTask
        (BulkTask<K,V,?> p, int b, int i, int f, Node<K,V>[] t,
         Consumer<? super Entry<K,V>> action) {
        super(p, b, i, f, t);
        this.action = action;
    }
    public final void compute() {
        final Consumer<? super Entry<K,V>> action;
        if ((action = this.action) != null) {
            for (int i = baseIndex, f, h; batch > 0 &&
                     (h = ((f = baseLimit) + i) >>> 1) > i;) {
                addToPendingCount(1);
                new ForEachEntryTask<K,V>
                    (this, batch >>>= 1, baseLimit = h, f, tab,
                     action).fork();
            }
            for (Node<K,V> p; (p = advance()) != null; )
                action.accept(p);
            propagateCompletion();
        }
    }
}

不知何故,像设置Component的大小的两个方法: setSize(Dimension)setSize(int, int)


Only difference is that one accepts a BiConsumer and the other just a Consumer.

Here the relevant code:

// forEach
static final class ForEachMappingTask<K,V>
    extends BulkTask<K,V,Void> {
    final BiConsumer<? super K, ? super V> action;
    ForEachMappingTask
        (BulkTask<K,V,?> p, int b, int i, int f, Node<K,V>[] t,
         BiConsumer<? super K,? super V> action) {
        super(p, b, i, f, t);
        this.action = action;
    }
    public final void compute() {
        final BiConsumer<? super K, ? super V> action;
        if ((action = this.action) != null) {
            for (int i = baseIndex, f, h; batch > 0 &&
                     (h = ((f = baseLimit) + i) >>> 1) > i;) {
                addToPendingCount(1);
                new ForEachMappingTask<K,V>
                    (this, batch >>>= 1, baseLimit = h, f, tab,
                     action).fork();
            }
            for (Node<K,V> p; (p = advance()) != null; )
                action.accept(p.key, p.val);
            propagateCompletion();
        }
    }
}

// forEachEntry
static final class ForEachEntryTask<K,V>
    extends BulkTask<K,V,Void> {
    final Consumer<? super Entry<K,V>> action;
    ForEachEntryTask
        (BulkTask<K,V,?> p, int b, int i, int f, Node<K,V>[] t,
         Consumer<? super Entry<K,V>> action) {
        super(p, b, i, f, t);
        this.action = action;
    }
    public final void compute() {
        final Consumer<? super Entry<K,V>> action;
        if ((action = this.action) != null) {
            for (int i = baseIndex, f, h; batch > 0 &&
                     (h = ((f = baseLimit) + i) >>> 1) > i;) {
                addToPendingCount(1);
                new ForEachEntryTask<K,V>
                    (this, batch >>>= 1, baseLimit = h, f, tab,
                     action).fork();
            }
            for (Node<K,V> p; (p = advance()) != null; )
                action.accept(p);
            propagateCompletion();
        }
    }
}

Somehow like the two methods to set size of Component: setSize(Dimension) and setSize(int, int)

相关问答

更多
  • 我会阅读ConcurrentHashMap的源代码,因为它在细节上相当复杂。 总之它有 多个分区可以独立锁定。 (默认16) 使用并发锁定操作来保证线程安全而不是同步。 拥有线程安全的迭代器。 synchronizedCollection的迭代器不是线程安全的。 不公开内部锁。 synchronizedCollection会。 I would read the source of ConcurrentHashMap as it is rather complicated in the detail. In ...
  • ConcurrentHashMap使用多个存储桶来存储数据。 这避免了读取锁,并大大提高了HashTable性能。 两者都是线程安全的,但ConcurrentHashMap有明显的性能胜利。 当您使用get()从ConcurrentHashMap读取时,没有锁,与所有操作简单同步的HashTable相反。 HashTable发布在旧版本的Java中,而ConcurrentHashMap是一个Java 5+的东西。 HashMap是在单个线程应用程序中使用的最好的方法。 ConcurrentHashMap u ...
  • 同步HashMap : 每个方法都使用对象级别锁定进行同步。 所以synchMap上的get和put方法获取一个锁。 锁定整个集合是一个性能开销。 当一个线程持有锁定时,没有其他线程可以使用该集合。 ConcurrentHashMap在JDK 5中引入。 在对象级别没有锁定,锁定的精细度更高。 对于ConcurrentHashMap ,锁可能处于hashmap bucket级别。 较低级别锁定的效果是您可以拥有同步读取器和写入器,这对于同步集合是不可能的。 这导致更多的可扩展性。 如果一个线程尝试修改Con ...
  • 根据您的需要,使用ConcurrentHashMap 。 它允许从多个线程并行修改Map,而不需要阻止它们。 Collections.synchronizedMap(map)创建一个阻止地图,这将降低性能,尽管确保一致性(如果正确使用)。 如果需要确保数据一致性,请使用第二个选项,并且每个线程需要具有地图的最新视图。 如果性能至关重要,则使用第一个,并且每个线程只会将数据插入到地图中,读取次数不太频繁。 For your needs, use ConcurrentHashMap. It allows con ...
  • 唯一不同的是,一个接受BiConsumer而另一个只接受消费者。 这里有相关代码: // forEach static final class ForEachMappingTask extends BulkTask { final BiConsumer action; ForEachMappingTask (BulkTask p, int b, int i, int f, Node ...
  • User.getId()方法返回什么类型的ID变量? 如果它不是原始类型,则需要使用equals()而不是==。 顺便说一句,一个好的静态代码分析器如FindBugs可以找到这样的错误。 What type returned from User.getId() method and what type of id variable? If it is not a primitive type, you need to use equals() instead of ==. By the way, a goo ...
  • 在阅读并发级别可以改变的文档时没有理由去思考。 它仍然是在对象创建过程中设置的内容。 如有疑问,请浏览源代码: http://hg.openjdk.java.net/jdk8/jdk8/jdk/file/43cb25339b55/src/share/classes/java/util/concurrent/ConcurrentHashMap.java 如果初始容量小于指定的并发级别,它似乎只会增加容器的数量。 There is no reason to think upon reading the docu ...
  • 反向兼容性是Hashtable仍然在JDK中的唯一原因。 另外, Hashtable另一种替代方法是Collections.synchronziedMap 。 Reverse compatibility is the only reason Hashtable is still in the JDK. Also, another alternative to Hashtable is a Collections.synchronziedMap.
  • AbstractMap上的clone()方法不适用于复制,它是一种内部方法,请记下protected关键字。 protected Object clone() throws CloneNotSupportedException { HashMap恰好有一个公共的clone(),但这并不意味着你应该使用它,这将在Effective Java中进一步讨论:clone()方法的分析 创建集合副本的更灵活的方法是通过复制构造函数。 这些优点是可以从任何其他地方创建任何Map实现。 /** * Creates a ...
  • 我使用它来快速查找用户id到多线程服务器中的用户对象。 我有一个网络线程,一个用于周期性任务的计时器线程和一个用于处理控制台输入的线程。 多个线程访问用户的哈希映射,因此它需要是线程安全的。 I use it for quick lookup from user ids to user objects in a multi-threaded server for instance. I have a network-thread, a timer thread for periodical tasks an ...

相关文章

更多

最新问答

更多
  • 获取MVC 4使用的DisplayMode后缀(Get the DisplayMode Suffix being used by MVC 4)
  • 如何通过引用返回对象?(How is returning an object by reference possible?)
  • 矩阵如何存储在内存中?(How are matrices stored in memory?)
  • 每个请求的Java新会话?(Java New Session For Each Request?)
  • css:浮动div中重叠的标题h1(css: overlapping headlines h1 in floated divs)
  • 无论图像如何,Caffe预测同一类(Caffe predicts same class regardless of image)
  • xcode语法颜色编码解释?(xcode syntax color coding explained?)
  • 在Access 2010 Runtime中使用Office 2000校对工具(Use Office 2000 proofing tools in Access 2010 Runtime)
  • 从单独的Web主机将图像传输到服务器上(Getting images onto server from separate web host)
  • 从旧版本复制文件并保留它们(旧/新版本)(Copy a file from old revision and keep both of them (old / new revision))
  • 西安哪有PLC可控制编程的培训
  • 在Entity Framework中选择基类(Select base class in Entity Framework)
  • 在Android中出现错误“数据集和渲染器应该不为null,并且应该具有相同数量的系列”(Error “Dataset and renderer should be not null and should have the same number of series” in Android)
  • 电脑二级VF有什么用
  • Datamapper Ruby如何添加Hook方法(Datamapper Ruby How to add Hook Method)
  • 金华英语角.
  • 手机软件如何制作
  • 用于Android webview中图像保存的上下文菜单(Context Menu for Image Saving in an Android webview)
  • 注意:未定义的偏移量:PHP(Notice: Undefined offset: PHP)
  • 如何读R中的大数据集[复制](How to read large dataset in R [duplicate])
  • Unity 5 Heighmap与地形宽度/地形长度的分辨率关系?(Unity 5 Heighmap Resolution relationship to terrain width / terrain length?)
  • 如何通知PipedOutputStream线程写入最后一个字节的PipedInputStream线程?(How to notify PipedInputStream thread that PipedOutputStream thread has written last byte?)
  • python的访问器方法有哪些
  • DeviceNetworkInformation:哪个是哪个?(DeviceNetworkInformation: Which is which?)
  • 在Ruby中对组合进行排序(Sorting a combination in Ruby)
  • 网站开发的流程?
  • 使用Zend Framework 2中的JOIN sql检索数据(Retrieve data using JOIN sql in Zend Framework 2)
  • 条带格式类型格式模式编号无法正常工作(Stripes format type format pattern number not working properly)
  • 透明度错误IE11(Transparency bug IE11)
  • linux的基本操作命令。。。