有条件地将“ multiple”属性添加到ui-select
我正在尝试multiple使用ui-select指令根据某个属性的值将属性添加到ng- attr-指令。不幸的是，这对我不起作用。我设置了一个简单的示例来演示正在发生的事情。
柱塞示例
问题答案：
编辑
在阅读了Angular Repo中提到的GitHubIssue之后，我终于明白了。
您需要使用更高的指令设置priority一个terminal属性，并将其属性设置为true（在编译我们的指令后，跳过所有其他指令的编译）。然后在postLink函数中，我们将编译整个元素本身。但是在此之前，我们需要删除自己的指令（无限循环！）。
指令代码
angular.module('app')
.directive('multiSelectChecker', function ($compile) {
return {
restrict: 'A',
replace: false,
terminal: true, //terminal means: compile this directive only
priority: 50000, //priority means: the higher the priority, the "firster" the directive will be compiled
compile: function compile(element, attrs) {
element.removeAttr("multi-select-checker"); //remove the attribute to avoid indefinite loop
element.removeAttr("data-multi-select-checker"); //also remove the same attribute with data- prefix in case users specify data-multi-select-checker in the html
return {
pre: function preLink(scope, iElement, iAttrs, controller) { },
post: function postLink(scope, iElement, iAttrs, controller) {
if(scope.options.Multiple == true) {
iElement[0].setAttribute('multiple',''); //set the multiple directive, doing it the JS way, not jqLite way.
}
$compile(iElement)(scope);
}
};
}
};
});
HTML代码
<ui-select ng-model="model.choice" multi-select-checker>
<ui-select-match>{{$item.Title}}</ui-select-match>
<ui-select-choices repeat="item.Id as item in options.SuggestedValues | filter: { Title: $select.search }">
<div ng-bind="item.Title | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
工作Plnkr：
http://plnkr.co/edit/N11hjOFaEkFUoIyeWqzc?p=preview
原始答案（也可以，但是重复代码）
我做了以下事情：
- 创建了一个包装指令，称为
multi-select-checker - 在该指令中检查
options.Multiple是对还是错 - 对于每种情况，返回两个不同的模板URL。情况1）：返回single-select.tpl.html或情况2）：返回mutli-select.tpl.html（包括“ multiple”指令）。
指令代码：
app.directive('multiSelectChecker', function() {
return {
template: '<ng-include src="getTemplateUrl()"/>',
controller: function($scope) {
$scope.getTemplateUrl = function() {
if($scope.options.Multiple == true) {
console.log("multi-select");
return "multi-select.tpl.html"
}
else {
console.log("single select");
return "single-select.tpl.html"
}
}
}
}
})
HTML中的用法：
<body ng-controller="DemoCtrl">
<multi-select-checker>
</multi-select-checker>
</body>
模板1：单选
<ui-select ng-model="model.choice">
<ui-select-match>{{$item.Title}}</ui-select-match>
<ui-select-choices repeat="item.Id as item in options.SuggestedValues | filter: { Title: $select.search }">
<div ng-bind="item.Title | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
模板2：多选
<ui-select ng-model="model.choice" multiple>
<ui-select-match>{{$item.Title}}</ui-select-match>
<ui-select-choices repeat="item.Id as item in options.SuggestedValues | filter: { Title: $select.search }">
<div ng-bind="item.Title | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
如您所见，这两个模板只有一个指令不同：“多个”。也许有更好的解决方案。
我什至不明白，为什么ng-attr-multiple方法不起作用。
另外我已经意识到，通过ng-attr-multiple方法呈现了两个单独的输入字段。
而且单选情况似乎已被破坏（通过删除了multiple指令）-这也位于您的初始Plnkr中。
工作守则
在此处查看工作的Plnkr：http
://plnkr.co/edit/T9e5tcAkcQLsDV3plfEl?p=preview
-
问题内容： 如果满足特定条件，是否有办法仅向React组件添加属性？ 我应该在渲染后基于Ajax调用将required和readOnly属性添加到表单元素中，但是由于readOnly =“ false”与完全省略该属性不同，因此我看不到如何解决此问题。 下面的示例应解释我想要的内容，但将无法正常工作（解析错误：意外的标识符）。 问题答案： 显然，对于某些属性，如果您传递给它的值不真实，React足
-
我想有条件地向对象添加一个属性。目前我有这个： 问题是如果汽车。电池不存在我有电池：未定义。如果对象中不存在该属性，我宁愿不要该属性。我怎样才能做到这一点？
-
让我更多地解释一下这个向导（组装您的PC）：我们在本节中有3个步骤, 步骤1：用户从现有产品中选择主板、Ram、Cpu等。 步骤2：查看列表并可以更改某些产品的数量（如Ram） 步骤3：用户在页面底部看到带有一些选项的最终列表，这些选项可以 选择装配费用（1.不装配，只购买列表2.装配有一年保修3.装配有无保修），当他们点击“提交”时，所有选择的产品都被添加到购物车，这是我们需要添加该费用的地方，
-
我正在尝试执行以下操作以满足代码构建器的要求（具体来说是Sencha Cmd）。 这是我需要做的本质。关键因素是函数体必须以返回对象文字结束。由于生成器中的限制，我无法返回变量。那么，如果参数includeB为true，如何在下面的伪代码点添加属性“b”，但如果为false，则根本不添加属性。不允许ie b==未定义或b==null。 也许这是不可能的。 感谢阅读和考虑， 默里
-
问题内容： 我正在为指令模板。如果范围内的属性设置为true，则应将其附加到元素。如果变量为false，则此数据属性不应呈现为元素的属性。 例如，如果scope变量为true，则模板应呈现： 如果为false，则模板应呈现： 模板将如何完成此任务？ 例如，我知道可以用来有条件地包含一个类。如果我希望模板呈现此内容： 然后我的模板如下所示： 如果scope变量为，则模板将简单地呈现： 因此，模板中有
-
问题内容： 我正在Angular JS中构建导航树。树中的大多数链接都指向我的网站内的页面，但有些链接可能指向外部网站。 如果链接的href以http：//或https：//开头，那么我假设该链接是针对外部站点的（正则表达式就可以了）。 我想将target =“ _ blank”属性应用于这些链接。创建链接时，我希望使用angular来做到这一点： 谁能帮我吗？ 谢谢 问题答案： 我将按照建议创建