javascript - Angularjs 和指令、ng-repeat 和模板绑定(bind)

标签 javascript angularjs

我是 anjular 的新手,所以如果我弄错了一些术语,请原谅我。

我在下面创建了一个简化的示例,我试图在指令中获取模板以绑定(bind)到 ng-repeat 中。如果您更新输入,则简单的 {{list.name}} 会更新,但 {{formattedtext}} 不会更改。

如何获取格式化文本以反射(reflect)正确的值?

HTML

<div ng-repeat="list in List" style="border: 1px solid;">
    <list-item>
    </list-item>
</div>
<div ng-repeat="list in List" style="border: 1px solid;">
    <input ng-model="list.name" />
</div>

app.js

referenceController.$inject = ['$scope'];

var app = angular.module('app',[]).controller('referenceController', referenceController);

app.directive("listItem", function () {
    return {
        restrict: "E",
        scope: false,
        template: "<div>Yo {{formattedText}} {{list.name}}</div>",
        link: function (scope, element, attrs) {
        scope.formattedText = scope.list.name + ' (' + scope.list.abbreviation + ')';
        }
   }
}); 

referenceController.js

function referenceController($scope) {
    $scope.List = [
        { id: 1, name: 'Name1', abbreviation:'1'},
        { id: 2, name: 'Name2', abbreviation: '2'},
        { id: 3, name: 'Name3', abbreviation: '3'},
        { id: 4, name: 'Name4', abbreviation: '4'}
    ];
}

最佳答案

formattedText 并不难导出,因此您可以将其放入模板中:

template: "<div>Yo {{list.name}} ({{list.abbreviation}}) {{list.name}}</div>"

关于javascript - Angularjs 和指令、ng-repeat 和模板绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33226293/

相关文章:

javascript - Angular select 不响应 ng-model 更改

angularjs - 为什么在初始化时超过 ng-maxlength 时 angularjs 会清空输入字段?

javascript - 为什么向后迭代数组比向前迭代更快

javascript - 使用innerHtml获取单选值并写回

javascript - 这两个angular js Controller 有什么区别?

angularjs - 指令不插值,在模板字符串中

javascript - AngularJS 无法获取下拉菜单的选定索引

javascript - 即使某些项目为空,如何检查数组中的所有项目?

javascript - 如果 Else CSS Hovercode 在 jQuery 中不起作用

javascript - Karma runner 不会运行所有文件