Angularjs Model Array Not updating with Template

Question

I've created the template with the below code. The edit functionality works fine however the model is updating back.

In the template, I've binded the model with ng-model but still it is not updating the model hobbies back on editing

Any ideas?

<html>
<head>
<title>
Angular Edit Template
</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" integrity="sha384-PmY9l28YgO4JwMKbTvgaS7XNZJ30MK9FAZjjzXtlqyZCqBY6X6bXIkM++IkyinN+" crossorigin="anonymous">

<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.7/angular.js"></script><!-- Latest compiled and minified CSS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js" integrity="sha384-vhJnz1OVIdLktyixHY4Uk3OHEwdQqPppqYR8+5mjsauETgLOcEynD9oPHhhz18Nw" crossorigin="anonymous"></script>

<script type="text/javascript">

angular.module('myApp', [])
    .controller('myCtrl', function($scope){
        $scope.hobbies = ["Swimming", "Reading"]
    })
    .directive('component', function(){
          return {
             template: [
               '<div>',
               '<span ng-show="!editing">{{ value }} <i ng-click="editing = true" class="glyphicon glyphicon-pencil"></i></span>',
               '<span ng-show="editing"><input type="input" ng-model="value"><i ng-click="editing = false" class="glyphicon glyphicon-ok"></i></span>',
               '</div>'  
             ].join(''),
             restrict: 'E',
             scope: {
                value: '=value'
             },
             link: function($scope){
                 $scope.editing = false;
             }
          }
    });

</script>
</head>
<body>
<div id="test" ng-app="myApp" ng-controller="myCtrl">

    <ul ng-repeat="n in hobbies">
    <li>
    <component value="n"></component>
    </li>
    </ul>


    <span>{{ hobbies }}</span>
</div>
</body>
</html>

To bind some variable(two way) you only need =. Replace value: '=value' with value: '=' — Arnab Roy
– Arnab Roy, Commented Feb 12, 2019 at 12:18

kendavidson · Accepted Answer · 2019-04-23 17:34:59Z

1

Take a look at this, the issue is you're two way binding a string, instead of an object, which means you're not actually getting the benefits: If you are not using a .(dot) in your AngularJS models you are doing it wrong?

If you use an object in either your parent, either passing the value or the whole object, you'll see that it works a little better.

$scope.hobbies = [{id:1,name:"Swimming"},{id:2,name:"Reading"}]

and then

<ul ng-repeat="n in hobbies">
  <li>
    <component value="n.name"></component>
  </li>
</ul>

or

'<span ng-show="!editing">{{ value.name }} <i ng-click="editing = true" class="glyphicon glyphicon-pencil"></i></span>',
'<span ng-show="editing"><input type="input" ng-model="value.name"><i ng-click="editing = false" class="glyphicon glyphicon-ok"></i></span>',

answered Apr 23, 2019 at 17:34

kendavidson

1,4601 gold badge11 silver badges19 bronze badges

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

Collectives™ on Stack Overflow

Angularjs Model Array Not updating with Template

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related