Angularjs ui tabset scope not updating

Question

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" >
                                                &nbsp;&nbsp;<i class="red icon-asterisk bigger-110"></i>&nbsp;Project Title already exists.</span>
                                            <!--<span class="green" ng-show="createProForm.protitle.$error.unique === false" >
                                                &nbsp;&nbsp;<i class="green icon-asterisk bigger-110"></i>&nbsp;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>

                                        &nbsp; &nbsp; &nbsp;
                                        <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.

akta kalariya · Accepted Answer · 2014-03-27 13:07:48Z

0

There is one solution to access it. You can access it using the following syntax in your controller. $scope.$$childHead.$$nextSibling.yourVariablename.

For example you have ng-model="state" on html page you can access it like this

$scope.$$childHead.$$nextSibling.state

answered Mar 27, 2014 at 13:07

akta kalariya

591 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mez79 · Accepted Answer · 2018-01-09 12:00:58Z

0

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
};

Collectives™ on Stack Overflow

Angularjs ui tabset scope not updating

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related