- 首页
- 前端开发
- Angularjs ui tabset 范围未更新
Angularjs ui tabset 范围未更新
[英] Angularjs ui tabset scope not updating
本文介绍了Angularjs ui tabset 范围未更新的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用 angular ui bootstrap 中的选项卡.一切正常,但我注意到选项卡内的文本框虽然使用了 ng-model,但并没有更新范围.
我搜索并发现这是因为子作用域,建议在绑定时使用 obj.property 表示法.
但我的模型仍然没有更新.
请指导我哪里出错了.
wbProcess.controller ("createProCtrl", function ($scope, $http, global, user){$scope.project = [{protitle :""},{prodesc : ""},{chkarchive:假}];$scope.tab = true;$scope.upurl;$scope.createpro = function(){$http({url: global.apiurl+"pro/create",方法:POST",数据:{'name':$scope.project.protitle,'prodesc':$scope.project.prodesc,'owner':user.user_id,'active':$scope.project.chkarchive}}).成功(功能(数据,状态,标题,配置){//在这里分配 $scope.persons 因为这里解决了 promise//$log.log(数据);如果(数据状态> 0){$scope.tab = false;}别的{}}).error(function (data, status, headers, config) {$scope.status = 状态;$log.log(状态);});}});
HTML 是
<标签><标签标题><i class="green icon-edit large-110"></i>说明</tab-heading><div><form name="createProForm" class="form-horizontal"><div class="control-group span7"><label class="control-label" for="form-field-1">Title</label><样式类型=文本/css">.ng-dirty.ng-valid ~ span.ok { color:green;显示:内联;}.ng-dirty.ng-invalid ~ span.ko { color:red;显示:内联;}</风格><div class="控件"><input type="text" name="protitle" id="projecttitle" ng-model="project.protitle" ng-unique="projects" placeholder="Title" required/><span class="red" ng-show="createProForm.protitle.$error.unique" > <i class="red icon-asterisk large-110"></i> 项目名称已经存在.</span><!--<span class="green" ng-show="createProForm.protitle.$error.unique === false" > <i class="green icon-asterisk large-110"></i> Available</span>-->
<div class="control-group span5"><div class="控件"><input class="ace" type="checkbox" id="id-disable-check" ng-model="project.chkarchive" tabindex="-1"/><label class="lbl" for="id-disable-check">归档项目</label>
<div class="control-group"><label class="control-label" for="form-field-9">项目描述</label><div class="控件"><textarea class="span7" id="projecttitle" ng-model="project.prodesc" maxlength="100" placeholder="100 个字符限制" required></textarea>
<div class="form-actions"><button class="btn btn-info" type="button" ng-disabled="createProForm.protitle.$pristine || createProForm.protitle.$dirty && createProForm.protitle.$error.unique ===真" ng-click="createpro()"><i class="icon-ok large-110"></i>节省按钮> <button class="btn" type="reset"><i class="icon-undo large-110"></i>重启按钮><button class="btn btn-default btn-sm" ng-click="tabs[1].disabled = !tabs[1].disabled">启用/禁用第三个选项卡</button>
</表单>
</tab><tab disabled = "tab"><标签标题><i class="green icon-cogs large-110"></i>配置</tab-heading><div><div class="span6">你好
<div id="dropzone" class="span6"><input type="hidden" id="upurl" value="{{ upurl }}"/><form action="/not-found" class="dropzone"><div class="fallback"><input name="file" type="file" multiple/>
</表单>
</tab><tab disabled = "tab"><标签标题><i class="green icon-group large-110"></i>用户</tab-heading><div><p>Etsy mixtape wayfarers,道德韦斯安德森豆腐,然后卖光了 mcsweeney 的有机 lomo 复古腰包 lo-fi 农场到餐桌现成的.</p>
</tab>
文本输入仅在第一个选项卡中.
解决方案
由于子作用域而在绑定时使用 obj.property 表示法的建议是正确的,但您错误地将 $scope.project
定义为对象的列表,而不仅仅是具有多个键/值对的简单对象.
试试:
$scope.project = {标题:",prodesc : "",chkarchive:假};
另见此处
I am using tabs from angular ui bootstrap.
All works fine but I noticed that text boxes inside the tab is not updating the scope although using ng-model.
I searched and found out that it is because of child scope and advise of using obj.property notation while binding.
but still my model is not being updated.
Please guide where I am going wrong.
wbProcess.controller ("createProCtrl", function ($scope, $http, global, user){
$scope.project = [{protitle :""},
{prodesc : ""},
{chkarchive : false}
];
$scope.tab = true;
$scope.upurl;
$scope.createpro = function(){
$http({
url: global.apiurl+"pro/create",
method: "POST",
data: {'name': $scope.project.protitle, 'prodesc': $scope.project.prodesc, 'owner': user.user_id , 'active': $scope.project.chkarchive}
}).success(function (data, status, headers, config) {
// assign $scope.persons here as promise is resolved here
//$log.log(data);
if(data.status > 0){
$scope.tab = false;
}
else{
}
}).error(function (data, status, headers, config) {
$scope.status = status;
$log.log(status);
});
}
});
HTML is
<tabset>
<tab>
<tab-heading>
<i class="green icon-edit bigger-110"></i>Description
</tab-heading>
<div>
<form name="createProForm" class="form-horizontal">
<div class="control-group span7">
<label class="control-label" for="form-field-1">Title</label>
<STYLE type="text/css">
.ng-dirty.ng-valid ~ span.ok { color:green; display:inline; }
.ng-dirty.ng-invalid ~ span.ko { color:red; display:inline; }
</STYLE>
<div class="controls">
<input type="text" name="protitle" id="projecttitle" ng-model="project.protitle" ng-unique="projects" placeholder="Title" required />
<span class="red" ng-show="createProForm.protitle.$error.unique" >
<i class="red icon-asterisk bigger-110"></i> Project Title already exists.</span>
<!--<span class="green" ng-show="createProForm.protitle.$error.unique === false" >
<i class="green icon-asterisk bigger-110"></i> Available</span>
-->
</div>
</div>
<div class="control-group span5">
<div class="controls">
<input class="ace" type="checkbox" id="id-disable-check" ng-model="project.chkarchive" tabindex="-1"/>
<label class="lbl" for="id-disable-check"> Archive Project</label>
</div>
</div>
<div class="control-group">
<label class="control-label" for="form-field-9">Project Description</label>
<div class="controls">
<textarea class="span7" id="projecttitle" ng-model="project.prodesc" maxlength="100" placeholder="100 Character Limit" required></textarea>
</div>
</div>
<div class="form-actions">
<button class="btn btn-info" type="button" ng-disabled="createProForm.protitle.$pristine || createProForm.protitle.$dirty && createProForm.protitle.$error.unique === true" ng-click="createpro()">
<i class="icon-ok bigger-110"></i>
Save
</button>
<button class="btn" type="reset">
<i class="icon-undo bigger-110"></i>
Reset
</button>
<button class="btn btn-default btn-sm" ng-click="tabs[1].disabled = ! tabs[1].disabled">Enable / Disable third tab</button>
</div>
</form>
</div>
</tab>
<tab disabled = "tab">
<tab-heading>
<i class="green icon-cogs bigger-110"></i>Configuration
</tab-heading>
<div>
<div class="span6">
hi
</div>
<div id="dropzone" class="span6">
<input type="hidden" id="upurl" value="{{ upurl }}" />
<form action="/not-found" class="dropzone">
<div class="fallback">
<input name="file" type="file" multiple/>
</div>
</form>
</div>
</div>
</tab>
<tab disabled = "tab">
<tab-heading>
<i class="green icon-group bigger-110"></i>Users
</tab-heading>
<div>
<p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade.</p>
</div>
</tab>
The text input is only in first tab.
解决方案
The advise of using obj.property notation while binding because of child scope is correct, but you wrongly defined $scope.project
as a list of objects instead of just a simple object with multiple key/value pairs.
Try:
$scope.project = {
protitle: "",
prodesc : "",
chkarchive: false
};
See also here
这篇关于Angularjs ui tabset 范围未更新的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文