N
N
Nikolay2016-09-23 16:52:16
Angular
Nikolay, 2016-09-23 16:52:16

How to merge two ng-repeats into one model?

Hello! I'll try to explain briefly. We have two files:
obj.html:

<ul>
    <li ng-repeat="object in obj.items" ng-model="obj.items">
        <input type="text" value="{{ object }}">
    </li>
</ul>

con.html:
<ul>
    <li class="{{ obj.opt.list_class }}" ng-repeat="object in obj.items">
        {{ object }}
    </li>
</ul>

Which ng-includes are:
<ul ng-model="SortCtrl.list2">
    <li class="list-type-option" ng-repeat="obj in SortCtrl.list2" /*ng-show="SortCtrl.compareBlog(obj)"*/>
        <div ng-include="SortCtrl.getObject(obj)"></div>
        <div ng-include="SortCtrl.editObject(obj)"></div>
    </li>
</ul>

in app.js file:
self.getObject = function (obj) { return 'templates/' + obj.type + '/obj.html'; };
self.editObject = function (obj) { return 'templates/' + obj.type + '/con.html'; };

As a result, two models are created (although one is needed). And when the value in the second "field" changes, only the second model changes.
Although if you include two other files (without ng-repeat):
obj.html:
<p class="{{ obj.opt.class }}">{{ obj.opt.value }}</p>

con.html:
<label>Text:</label><input type="text" ng-model="obj.opt.value" value="{{obj.opt.value}}">
Everything works as intended.
Guide the young Padawan on the right path, friends)
PS If I didn’t explain clearly, I can post more code)

Answer the question

In order to leave comments, you need to log in

2 answer(s)
N
Nikolai, 2016-09-29
@iNickolay

Solution that helped: I
had to specify the model with the
obj.html index:

<ul>
    <li ng-repeat="object in obj.items track by $index">
        <input type="text" ng-model="obj.items[$index]">
    </li>
</ul>

A
Andrew, 2016-09-24
@impwx

ng-includeThe default directive always creates an isolated scope. The best way to avoid this is to create separate directives for your elements, like object-viewand object-edit. There, an isolated area will not be created if you do not specify it.
A faster but dirtier option is to make your own alternative ng-includewhich does the same thing but doesn't isolate the area. There is an implementation here:
stackoverflow.com/a/17340138/1293168

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question