如何更新NG-重复选择内部模型？ [英] How to update model on select inside of ng-repeat?

问题描述

儿童范围内的部件，与NG-反复DIV和下拉菜单中选择：

 ＆LT; D​​IV NG重复=一词在ticker.terms＆GT;
    ＆LT;选择NG模型=term.chosenTagNG变化=ticker.changeTag（项）＆GT;
        ＆LT;选项＆GT; ...＆LT; /选项＆GT;
        ＆LT;选项＆GT; ...＆LT; /选项＆GT;
        ＆LT;选项＆GT; ...＆LT; /选项＆GT;
 

---

我试图改变^ term.chosenTag从父范围，词是重复数据对象（长期而言）

---

展开code要旨：

主要父HTML： href=\"https://gist.github.com/leongaban/e0154005bed6b6892df7\" rel=\"nofollow\"> https://gist.github.com/leongaban/e0154005bed6b6892df7

北京时间儿童HTML

https://gist.github.com/leongaban/9a5fd86643051fd9e1af

TickerController（儿童）

https://gist.github.com/leongaban/2d58174cfe6e5c9c0465

MainController（家长）

https://gist.github.com/leongaban/1563b09b906337a3e6ad

TagFactory

https://gist.github.com/leongaban/8db5027e1cb86f614fa5

---

现在的需要也控制在孩子的模型中选择父范围的选择：

 ＆LT;选择NG模型=main.selected_tag​​
        NG-变化=main.changeTag（main.the_tag）＆GT;
 

这main.changeTag函数调用的：

  vm.changeTag =功能（项）{    //模型更新标签：
    TagFactory.updateTag（项）;
};
 

TagFactory然后更新数据库术语以及我的模型：

  //更新标签：
tags.updateTag =功能（数据）{
    var标记=数据;    //过滤器，找到标签由ID：
    变种tagObj = {};
    tagObj = $过滤器（'过滤器'）（标签，{term_id：tag.term_id}）[0];    //模型更新标签：
    tagObj.tag = tag.chosenTag;    / **
    * PUT：在DB更新标签
    * /
    ApiFactory.updateTag（
        tag.term_id，
        tag.chosenTag，
        tag.ticker）。然后（功能（数据）{
            的console.log（'PUT：'）;
            的console.log（数据）;
    }）;    返回标签;
};
 

解决方案

由于您炒掉updateTag通话的onchange，相对于的onclick，我会认为不断更新服务的数据确定。另一种方法，这些都不会是可取的是，如果你只想在特定的时间将数据推到服务，以避免立即看到的变化到出厂数据，如果你仍然需要执行AJAX所有的模板。

在适当的控制器，与TagFactory注入，创建工厂的数据参考：

  $ scope.tags = TagFactory.tags;
 

那么你的HTML可以直接修改TagFactory本身：

 ＆LT; D​​IV NG重复=标签中/ *前pression决定相对于scope.tags $ * / ticker.terms＆GT;
    ＆LT;选择NG模型=tag.chosenTag＆GT;
 

这位前pression可以像标签那样简单，但它可能会需要涉及到一个过滤器，只返回那些ticker.terms标签。

The widget inside the Child scope, with the ng-repeated div and select dropdown:

<div ng-repeat="term in ticker.terms">
    <select ng-model="term.chosenTag" ng-change="ticker.changeTag(term)">
        <option>...</option>
        <option>...</option>
        <option>...</option>

---

I'm trying to change ^ term.chosenTag from the parent scope, term is the repeated data object (term in terms)

---

Full code Gists:
Main Parent HTML:
https://gist.github.com/leongaban/e0154005bed6b6892df7

Ticker Child HTML
https://gist.github.com/leongaban/9a5fd86643051fd9e1af

TickerController (Child)
https://gist.github.com/leongaban/2d58174cfe6e5c9c0465

MainController (Parent)
https://gist.github.com/leongaban/1563b09b906337a3e6ad

TagFactory
https://gist.github.com/leongaban/8db5027e1cb86f614fa5

---

Now the select in the parent scope that needs to also control the model in the child select:

<select ng-model="main.selected_tag"
        ng-change="main.changeTag(main.the_tag)">

That main.changeTag function calls this:

vm.changeTag = function(term) {

    // Update tag in model:
    TagFactory.updateTag(term);
};

TagFactory then updates the term on the database as well as my model:

// Update tag:
tags.updateTag = function(data) {
    var tag = data;

    // Filter and find tag by id:
    var tagObj = {};
    tagObj = $filter('filter')(tags, { term_id: tag.term_id })[0];

    // Update tag in model:
    tagObj.tag = tag.chosenTag;

    /**
    * PUT : update tag on DB
    */
    ApiFactory.updateTag(
        tag.term_id,
        tag.chosenTag,
        tag.ticker).then(function(data) {
            console.log('PUT:');
            console.log(data);
    });

    return tag;
};

解决方案

Since you fire your updateTag call onchange, as opposed to onclick, I am going to assume that constantly updating the service's data is OK. The other method where this wouldn't be advisable is if you only want to push data to the service at certain times, to avoid all your templates from seeing the changes to the factory data immediately if you still need to execute AJAX.

In the appropriate controller, with TagFactory injected, create a reference to the factory's data:

$scope.tags = TagFactory.tags;

Then your HTML can directly modify the TagFactory itself:

<div ng-repeat="tag in /*expression that determines ticker.terms with respect to $scope.tags*/">
    <select ng-model="tag.chosenTag">

The expression can be as simple as "tags", but it will probably need to involve a filter that only returns tags that are ticker.terms.

这篇关于如何更新NG-重复选择内部模型？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！