Question

可能是一个菜鸟问题，但我对角度有点新意。

我正在尝试通过ng-model指令更新ng-style值，我不太确定我在这里做错了什么。我试图实现的目标是让div中的文本通过对单选按钮的选择来对齐。

我发布了一个关于我在下面尝试做什么的小提琴。标记的基本结构如下。我在这里做错了什么想法？

<div ng-app>
<div ng-controller="alignmentCtrl">
    <div ng-style="{'text-align': title}">This title should be aligned: {{title}}</div>
    <div class="radio-buttons">
        <input id="left" name="align" type="radio" value="Left" ng-model="title = 'left'">
        <label for="left">Left</label>
        <input id="center" name="align" type="radio" value="Center" ng-model="title = 'center'">
        <label for="center">Center</label>
        <input id="right" name="align" type="radio" value="Right" ng-model="title = 'right'">
        <label for="right">Right</label>
    </div>
</div>

http://jsfiddle.net/skooliano/bvnGP/7/

Answer 1

你的jsfiddle有几个错误。

最好在“Frameworks＆amp; Extensions”中设置纯JS并且不包装，然后将链接添加到angular作为外部资源。然后在“小提琴选项”

中使用ng-app属性设置body标签

你也在app上调用未定义的.controller。您应该将其更改为wdLayout

返回的angular.module('wdLayout', []);

var wdLayout = angular.module('wdLayout', []);

wdLayout.controller('alignmentCtrl', ['$scope', function ($scope) {
    $scope.title = "Left";
}]);

这是工作小提琴：http://jsfiddle.net/qk53G/

通过ng-model应用ng-style

1 个答案: