gpt4 book ai didi

javascript - 在 if 条件下从 Bootstrap 选项卡获取模型值

转载 作者:行者123 更新时间:2023-11-30 00:27:24 27 4
gpt4 key购买 nike

我在对处于 ng-if 条件下的选项卡内的表单模型进行两种方式绑定(bind)时遇到问题。

我的问题的 Plunker 链接是

http://plnkr.co/edit/F5h8eCu7IlXlwi1XhdV7?p=preview

我已经尝试了所有可能的方法,但在选项卡集下无法识别范围变量。使用 $parent 引用在“ng-if”部分访问范围变量,但由于某种原因,选项卡集无法识别这些值中的任何一个。任何帮助或提示都会有帮助

代码如下

// Code goes here
var app =angular.module('textModule',['ui.bootstrap']);


app.controller('checktest',function($scope){

$scope.step= 0;
$scope.configFormData = "angular test";
$scope.configFormData2 = "angular test 2";



});
<!DOCTYPE html>
<html>

<head>
<link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="jquery@2.1.3" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script data-require="angular-ui-bootstrap@*" data-semver="0.12.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>
<script src="script.js"></script>
</head>

<body ng-app="textModule">
<div ng-controller="checktest">
<div ng-form="configForm">
<div class="general" ng-if="step == 0">
{{$parent.configFormData}} <br />
{{$parent.configFormData2}}
<tabset class="nav nav-tabs">
<tab>
<tab-heading>tab 1</tab-heading>
<div role="tabpanel" class="tab-pane active" id="network" aria-labelledby="network-tab">
{{$parent.configFormData}}
<input type="text" ng-model="$parent.configFormData" />
</div>
</tab>
<tab>
<tab-heading>tab 2 </tab-heading>
<div role="tabpanel" class="tab-pane" id="region" aria-labelledby="region-tab">
<input type="text" ng-model="$parent.configFormData2" />
</div>
</tab>
</tabset>
</div>
</div>
</div>
</body>

</html>

最佳答案

在 Angular 中,范围变量的继承仅适用于对象,不适用于直接范围属性。

https://github.com/angular/angular.js/wiki/Understanding-Scopes

尝试使用一些数据对象并绑定(bind)到该对象:

app.controller('checktest',function($scope){
$scope.step = 0;
$scope.data = {
configFormData: "angular test",
configFormData2: "angular test 23",
};
});

<input type="text" ng-model="data.configFormData" />

顺便说一下:在你的案例中你不需要 $parent。

关于javascript - 在 if 条件下从 Bootstrap 选项卡获取模型值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30909310/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com