使用ng-model防止动态变化

时间:2016-12-17 18:41:13

标签: javascript angularjs angular-ngmodel

我有一些字段可以编辑用户的数据。其中一个字段也用于面包屑: Same data

我使用ng-model来绑定所有字段:

...
<ol class="breadcrumb">
        <li><a href="#">Home</a></li>
        <li><a href="#">{{user.name}}</a></li>
        <li class="active">Profile</li>
        <li class="active">Edit</li>
    </ol>
    <hr>
    <form role="form" class="col-sm-2">
        <div class="input-group">
            <span class="input-group-addon">
            <span class="glyphicon glyphicon-user"></span>
            </span>
            <input type="text" ng-model="user.name" placeholder="Username" class="form-control">
        </div>
        <div class="input-group">
            <span class="input-group-addon">
            <span class="glyphicon glyphicon-user"></span>
            </span>
            <input type="text" ng-value="user.birthday" placeholder="Birthday" class="form-control">
        </div>
        <div class="input-group">
            <span class="input-group-addon">
            <span class="glyphicon glyphicon-user"></span>
            </span>
            <input type="text" ng-value="user.city" placeholder="City" class="form-control">
        </div>
        <button id="submit" ng-click="saveUser(user)" class="btn btn-success pull-right">Save</button>
    </form>
...

问题以及ng-model的正确行为会在输入更新时更改痕迹导航的名称值: enter image description here 是否可以将面包屑中的值设置为静态并防止其更改? 我想要实现的实际结果: result to achieve

1 个答案:

答案 0 :(得分:1)

答案是我应该在面包屑中的::元素上使用li使用一次性数据绑定,如下所示:

<li><a href="#">{{::user.name}}</a></li>

它可以防止数据在呈现后未来发生变化。