Question

我是AngularJS的新手，最近开始尝试创建表格和ng-repeat功能。我有一个想法是编写一个JS对象，其中每个对象都有一个相应的name和一个与之关联的HTML按钮元素。我能够毫无问题地创建对象列表，但我遇到的问题是如何显示信息;具体来说，如何显示每个对象的按钮元素。

以下是我在列表中显示每个对象的代码：

<!DOCTYPE html>
<html>
<script 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<ul>
    <li ng-repeat="x in names">
        {{x.name + ', ' + x.button}}
    </li>
</ul>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
    $scope.names = [{name:'Mike',button:document.createElement('button')}]
});
</script>

</body> 
</html>

目前我的搜索结果如下：

我希望看到的是：

Answer 1

您应该使用html标记创建按钮。像这样：

<div ng-app="myApp" ng-controller="myCtrl">
<ul>
    <li ng-repeat="x in names">
        {{x.name}}
        <button ng-click="...">{{x.button}}</button>
    </li>
</ul>
</div>

它是使用AngularJS执行此操作的标准方法，可让您更自由地使用ng指令和所有指令。

Answer 2

不知道你想要创建一个元素。只需使用文本作为属性值，并在模板中添加适当的标记。

对任何dom方法使用组件或指令。他们不属于控制者

＆＃13;

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
    $scope.names = [{name:'Mike',button:'Button name'}]
});

＆＃13;

<!DOCTYPE html>
<html>
<script 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<ul>
    <li ng-repeat="x in names">
        {{x.name}}<button>{{x.button}}</button>
    </li>
</ul>
</div>

<script>

</script>

</body> 
</html>

＆＃13;

列表中的显示按钮 - AngularJS

2 个答案: