Using jQuery to change Angular tag value

Question

I'm using angular and when a checkbox is selected I want to change the value of the data-field directive/tag.

<tbody data-ng-repeat="(contractIndex,contract) in contracts">
  <tr>
    <td>
      <div id="suppliername" data-strat-form-control data-field-display-id="1" data-vmformreadonly="true" data-show-tool-tip="showToolTip(contract.fields[4].htmlName)" data-strat-model="contract" data-field="(contract.hasOwnProperty('COMMIT_CONTRACT')) ? contract.fields[5] : contract.fields[4]"></div>
    </td>
    <td class="text-center">
      <div data-strat-form-control data-field-display-id="20" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(contract.fields[5].htmlName)" data-strat-model="contract" data-field="contract.fields[5]" ng-click="$('#suppliername').attr('data-field', contract.fields[0]);" ></div>
    </td>
    <td>
  </tr>
</tbody>

The 2nd div is a checkbox via a custom directive (data-field-display-id). But when clicked there is no effect on the 1st div's data-field.

What am I doing wrong and how do I fix it?

Edit:

angular version: v1.2.28

directive:

.directive("stratFormControl", function () {
    return {
        restrict: "A",
        scope: {
            field: '=',
            fieldDisplayId: '=',
            stratModel: '=',
            vmformreadonly: '=',
            showToolTip: '&'
        },
        link: function (scope, elem, attrs) {
            if (attrs.fieldDisplayId == 12) {
                angular.forEach(scope.stratModel[scope.field.name], function (currentField, curFieldIndex) {
                    if (currentField == 1) {
                        scope.selected1 = true;
                    };
                    if (currentField == 2) {
                        scope.selected2 = true;
                    };
                    if (currentField == 3) {
                        scope.selected3 = true;
                    };
                    if (currentField == 4) {
                        scope.selected4 = true;
                    };
                });
            };
            scope.checkClick = function (id) {
                var pushItem = true;
                angular.forEach(scope.stratModel[scope.field.name], function (currentField, curFieldIndex) {
                    if (currentField == id) {
                        scope.stratModel[scope.field.name].splice(curFieldIndex,1);
                        pushItem = false;
                    };
                });
                if (pushItem) {
                    scope.stratModel[scope.field.name].push(id);
                };
            };
            scope.noOptions = function (id) {
                scope.stratModel[scope.field.name] = [];
            };
            if (scope.stratModel[scope.field.name])
                if(scope.stratModel[scope.field.name].length>0){
                    scope.showOptionsInd = true;
                }else{
                    scope.showOptionsInd = false;
                };
            scope.indicatorFieldText = scope.field.displayName.substring(0, scope.field.displayName.search('#'));
            scope.optionsDisplay = scope.field.displayName.substring(scope.field.displayName.search('#') + 1);
        },
        //X3
        templateUrl: function (element, attrs) {
            return baseUrl + 'JavaScript/Directives/Templates/Fields/' + attrs.fieldDisplayId + '.html';
        },
        replace: true//,
        //compile: function (element) {
            // Use the compile function from the RecursionHelper,
            // And return the linking function(s) which it returns
        //    return RecursionHelper.compile(element);
        //}
    };
})

version of angular, and please add the directive code.

alphapilgrim
– alphapilgrim

2017-05-24 14:44:36 +00:00
Commented May 24, 2017 at 14:44 — alphapilgrim
– alphapilgrim, Commented May 24, 2017 at 14:44

Pop-A-Stash · Accepted Answer · 2017-05-24 15:44:03Z

1

I don't believe that you are breaking any universal laws by mixing jQuery and Angular, but I really think it only makes things worse. Object-oriented programming and Angular alone, I think, is the best solution:

function DataField(_contract) {
  var self = this;
  this.contract = _contract;
  this.chooseField = function() {
    if (self.overrideField) {
      return self.overrideField;
    }
    else {
      return self.contract.hasOwnProperty('COMMIT_CONTRACT') ? self.contract.fields[5] : self.contract.fields[4];
    }
  };

  this.click = function(field) {
    self.overrideField = field;
  };
}

// assume this is a registered factory
function DataFieldFactory() {
  return {
    newDataField: function(contract) {
      return new DataField(contract);
    }
  }
}

function ParentController($scope, DataFieldFactory) {
  angular.forEach(contracts, function(contract) {
    contract.dataField = DataFieldFactory.newDataField(contract);
  });
}

Markup

<tbody data-ng-repeat="(contractIndex,contract) in contracts">
  <tr>
    <td>
      <div id="suppliername" data-strat-form-control data-field-display-id="1" data-vmformreadonly="true" data-show-tool-tip="showToolTip(contract.fields[4].htmlName)" data-strat-model="contract" data-field="contract.dataField.chooseField()"></div>
    </td>
    <td class="text-center">
      <div data-strat-form-control data-field-display-id="20" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(contract.fields[5].htmlName)" data-strat-model="contract" data-field="contract.fields[5]" ng-click="contract.dataField.click(contract.fields[0])" ></div>
    </td>
    <td>
  </tr>
</tbody>

edited May 24, 2017 at 15:44

answered May 24, 2017 at 15:32

Pop-A-Stash

6,6975 gold badges30 silver badges54 bronze badges

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

2 Comments

David Tunnell Over a year ago

Thanks for the response. This would go in the controller correctl?

Pop-A-Stash Over a year ago

Correct. ParentController is meant to be the controller for your template.

Collectives™ on Stack Overflow

Using jQuery to change Angular tag value

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related