- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
使用jquery-select2 (不是 ui-select)和 Angular ,我正在尝试将值设置为 ng-model。
我尝试过使用 $watch
和 ng-change
,但在使用 select2 选择项目后似乎都没有触发。
不幸的是,我使用的是购买的模板,无法使用 angular-ui。
HTML:
<input type="hidden" class="form-control select2remote input-medium"
ng-model="contact.person.id"
value="{{ contact.person.id }}"
data-display-value="{{ contact.person.name }}"
data-remote-search-url="api_post_person_search"
data-remote-load-url="api_get_person"
ng-change="updatePerson(contact, contact.person)">
客户端 Controller :
$scope.updatePerson = function (contact, person) {
console.log('ng change');
console.log(contact);
console.log(person);
} // not firing
$scope.$watch("client", function () {
console.log($scope.client);
}, true); // not firing either
JQuery 集成:
var handleSelect2RemoteSelection = function () {
if ($().select2) {
var $elements = $('input[type=hidden].select2remote');
$elements.each(function(){
var $this = $(this);
if ($this.data('remote-search-url') && $this.data('remote-load-url')) {
$this.select2({
placeholder: "Select",
allowClear: true,
minimumInputLength: 1,
ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
url: Routing.generate($this.data('remote-search-url'), {'_format': 'json'}),
type: 'post',
dataType: 'json',
delay: 250,
data: function (term, page) {
return {
query: term, // search term
};
},
results: function (data, page) { // parse the results into the format expected by Select2.
return {
results: $.map(data, function (datum) {
var result = {
'id': datum.id,
'text': datum.name
};
for (var prop in datum) {
if (datum.hasOwnProperty(prop)) {
result['data-' + prop] = datum[prop];
}
}
return result;
})
}
}
},
initSelection: function (element, callback) {
// the input tag has a value attribute preloaded that points to a preselected movie's id
// this function resolves that id attribute to an object that select2 can render
// using its formatResult renderer - that way the movie name is shown preselected
var id = $(element).val(),
displayValue = $(element).data('display-value');
if (id && id !== "") {
if (displayValue && displayValue !== "") {
callback({'id': $(element).val(), 'text': $(element).data('display-value')});
} else {
$.ajax(Routing.generate($this.data('remote-load-url'), {'id': id, '_format': 'json'}), {
dataType: "json"
}).done(function (data) {
callback({'id': data.id, 'text': data.name});
});
}
}
},
});
}
});
}
};
如有任何建议,我们将不胜感激! :)
更新
我已经成功地将 a plunk 放在一起这似乎同样重现了问题 - 现在看起来好像 ng-watch 和 $watch 事件仅在第一次更改值时才被触发。然而,在我的代码中(以及当添加进一步的复杂性时,例如动态添加和从集合中删除),它甚至似乎不会触发一次。
再次,如果您能指出正确的方向(或实际上任何方向),我们将不胜感激!
最佳答案
您的示例存在许多问题。我不确定我是否能够提供“答案”,但希望以下建议和解释能够帮助您。
首先,您“混合”了 jQuery 和 Angular。一般来说,这确实行不通。例如:
在 script.js 中,您运行
$(document).ready(function() {
var $elements = $('input[type=hidden].select2remote');
$elements.each(function() {
//...
});
});
当 DOM 最初准备好时,此代码将运行一次。它将选择当前位于 DOM 中的 select2remote 类的隐藏输入元素,并在其上初始化 select2 插件。
问题是,运行此函数后添加的任何新 input[type=hidden].select2remote 元素根本不会被初始化。例如,如果您异步加载数据并填充 ng-repeat,就会发生这种情况。
修复方法是将 select2 初始化代码移动到指令中,并将该指令放置在每个输入元素上。删节后,该指令可能如下所示:
.directive('select2', function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attr, ngModel) {
//$this becomes element
element.select2({
//options removed for clarity
});
element.on('change', function() {
console.log('on change event');
var val = $(this).value;
scope.$apply(function(){
//will cause the ng-model to be updated.
ngModel.setViewValue(val);
});
});
ngModel.$render = function() {
//if this is called, the model was changed outside of select, and we need to set the value
//not sure what the select2 api is, but something like:
element.value = ngModel.$viewValue;
}
}
}
});
抱歉,我对 select2 不够熟悉,不知道用于获取和设置控件当前值的 API。如果您在评论中向我提供这一点,我可以修改该示例。
您的标记将更改为:
<input select2 type="hidden" class="form-control select2remote input-medium"
ng-model="contact.person.id"
value="{{ contact.person.id }}"
data-display-value="{{ contact.person.name }}"
data-remote-search-url="api_post_person_search"
data-remote-load-url="api_get_person"
ng-change="updatePerson(contact, contact.person)">
实现此指令后,您可以删除整个 script.js。
在您的 Controller 中,您有以下内容:
$('.select2remote').on('change', function () {
console.log('change');
var value = $(this).value;
$scope.$apply(function () {
$scope.contact.person.id = value;
});
});
这里有两个问题:
首先,您在 Controller 中使用 jQuery,您确实不应该这样做。
其次,这行代码将在整个应用程序中的 select2remote 类的每个元素上触发一个更改事件,该类在 Controller 启动时位于 DOM 中。/p>
由 Angular 添加的元素(即通过 ng-repeat)很可能不会在其上注册更改监听器,因为它们将在 Controller 实例化后(在下一个消化周期)。
此外, Controller 范围之外具有更改事件的元素将修改 Controller 的 $scope 的状态。解决方案再次是将此功能移至指令中并依赖 ng-model 功能。
请记住,无论何时离开 Angular 的上下文(即,如果您使用 jQuery 的 $.ajax 功能),都必须使用scope.$apply() 重新进入 Angular 的执行上下文。
希望这些建议对您有所帮助。
关于angularjs - select2、ng-model 和 Angular,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29880950/
是否有在非 AngularJS 页面内初始化 AngularJS 应用程序的最佳实践方法?我正在向现有网页添加新功能,需要传入一个参数。具体来说,有一组选项卡,一个新选项卡将启动一个 Angular
找不到这两者之间的区别。 保留其中任何一个来引导我的 Angular 应用程序是否有意义? angular.bootstrap(document,['myApp']); 或者 angularAMD.b
我试图理解 Packpub 的书附带的示例 AngularJS 应用程序。 app.js文件在 client/src/app 下定义文件夹,它的模块定义看起来像 angular.module('app
Angularjs 具有用于表单验证和显示错误消息的强大基础设施。但是,我处于必须在特定场景中向用户显示警告消息的情况。这是我的简单表格的图表 该表单在两个字段上都应用了必需和模式验证。除了此验证之外
我在重试功能正常工作时遇到了一些麻烦,希望能获得一些帮助。我有一个要调用的$ resource,直到出现成功情况或超过最大重试次数为止。 我似乎遇到的问题是,在我的重试函数中,我正在调用另一个prom
我目前正在开发一个 AngularJS 应用程序,我遇到了以下障碍。 当用户提交时,我们有一个 login 页面,我们调用一个 web api 并对用户进行身份验证,我们目前正在使用 claims 身
当范围更新时,指令的属性不会改变,它们仍然保持初始值。我在这里缺少什么? HTML works great works: {{foo}} Javascript (基于首页上的 A
我正在使用 Zurb 的 Foundation 框架修改应用程序以实现响应性和 AngularJS。存在数据显示在带有 ... 的表中的错误有 是根据 Foundation 的响应规则隐藏/显示的。不
在过去的三天里,我一直在搜寻互联网,试图弄清楚当angular注意到div的宽度发生变化时如何使指令运行。 我不断看到相同的示例,说明如何实现此目标,但是它们对我不起作用,我也不知道为什么。 我回到一
我正在使用以下代码尝试汇总 在 Angular ,这在整个作品中,但是小于 0.5 的数字四舍五入为 0。我想 向上取整 每个数字到下一个整数。例如 0.02 应四舍五入为 1 {{((data.Vi
我目前正在尝试以一种能够适当扩展到企业级别的方式来组织我的 Angular 应用程序。但是我发现似乎过度依赖框架内的命名约定,并且试图避免命名冲突是一个真正的问题。 例如,当定义任何 constant
我正在阅读 AngularJS 基础知识,并且喜欢在我的页面中使用它的绑定(bind)功能。所以我可以定义可以在 View 中显示的数据,可以对数据进行更改,以便在 View 中更改它而无需担心。 在
在父 Controller 范围内,我定义了 selectedItem设置为“x”。然后在子范围内,我定义了selectedItem使用 ngModel:
关闭。这个问题需要更多 focused .它目前不接受答案。 想改进这个问题?更新问题,使其仅关注一个问题 editing this post . 5年前关闭。 Improve this questi
如果2个条件为真,我试图将一个特定的类应用于li元素,因此我编写了以下代码,但似乎无法正常工作 ng-class="{current:isActive('/'), loginStatus: false
请看看朋克。 http://plnkr.co/edit/DuTFYbLVbPkCIvRznYjG?p=preview ng-pattern regEx不适用于输入文本字段。 仅在需要验证的情况下才能正
我正在为iOS + Android构建AngularJS(1.x)和Ionic/Cordova移动应用程序。我想在登录页面上添加/创建“深层链接”,以便在我向新用户发送“确认您的电子邮件”电子邮件时,
angularjs 中服务(或工厂)的生命周期是什么,何时重新初始化? 最佳答案 当 Angular 启动时,它会将服务的构造函数附加到关联的模块上。这种情况发生一次。 angular .modu
我对 Angular 很陌生,所以希望我知道的足够多,可以问什么似乎是合理的设计问题。 我正在通过 Angular 绘制一些数据,并且正在使用 $resource。在将 Angular 引入项目之前,
我需要在我的 angular-breeze 应用程序中使用国家/地区下拉菜单,我尝试了以下操作: https://github.com/banafederico/angularjs-country-s
我是一名优秀的程序员,十分优秀!